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译 者 序 


JSON 和 XML 是 较为 流行 的 数据 交换 格式 ， 在 Web API、NoSQL 数据 库 、 服 务 端 编 
程 语言 和 客户 端 框架 中 都 可 以 看 到 JSON 的 身影 。 在 不 同 平台 间 的 传递 数据 方面 ，JSON 
已 成 为 XML 强 有 力 的 替代 者 。 与 XML 相 比 ,JSON 更 加 简洁 且 易 于 阅读 ， 同 时 方便 检查 
排 错 。 另 外 ，JSON 更 加 轻 量 级 ， 不 管 是 编写 、 传 输 ， 还 是 解析 都 更 加 高 效 。JSON 在 传 
输 过 程 中 采用 了 压缩 技术 ， 因 而 更 加 节省 带宽 。 最 后 ，JSON 还 得 到 了 众多 语言 的 支持 ， 
如 JavaScript、Python、C、C++ 等 主流 语言 。 

本 书 通 过 示例 展示 了 JSON 在 Web 开发 中 扮演 的 不 同 角色 .在 了 解 了 JSON 的 基础 知 
识 后 ， 将 在 Angular 5、Nodejs、 模 板 柑 入 机 制 的 基础 上 实现 JSON 应 用 程序 。 对 于 服务 
器 端的 脚本 编程 ， 本 书 还 将 尝试 实现 Hapijs( 因 其 可 配置 的 JSON 架构 著称 )。 此 外 ， 本 
书 还 将 学 习 如 何 使 用 Kafka 为 实时 应 用 程序 实现 JSON， 以 及 如 何 为 任务 运行 器 和 
MongoDB BSON 存储 实现 JSON。 本 书 通过 JSON 格式 的 案例 进行 讲解 ,帮助 读者 构建 快 
速 、 可 伸缩 和 高 效 的 Web 应 用 程序 。 

在 本 书 的 翻译 过 程 中 ， 除 刘 晓 雪 外 ， 王 辉 、 刘 璋 、 张 博 、 刘 福 、 张 华 至 等 人 也 参与 了 
部 分 翻译 工作 ， 在 此 一 并 表示 感谢 。 

日 于 译 者 水 平 有 限 ， 难 免 有 疏 漏 和 不 妥 之 处 ， 朋 请 广大 读者 批评 指正 。 
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JSON 是 数据 交换 的 一 种 标准 格式 ,本 书 将 通过 各 种 示例 讨论 JSON 在 Web 开发 中 饰 
演 的 不 同 角色 。 在 阅读 完 本 书后 , 读者 将 会 以 全 新 的 角度 理解 应 用 程序 的 解决 方案 和 复杂 
问题 的 处 理 方式 。 


适用 读者 


如 果 读 者 是 一 名 对 JavaScript 或 PHP 开发 有 着 基本 了 解 的 Web 人员， 并 且 希 望 编写 
JSON 数据 进而 将 其 与 RESTful API 集成 ， 以 创建 快速 、 可 伸缩 的 应 用 程序 ， 那 么 ， 本 书 
将 十 分 适合 于 您 。 


本 书 内 容 


第 1 章 : JSON 简介 。 将 讨论 JSON 的 历史 及 其 工作 方式 和 内 存 中 的 存储 方式 。 另 外 ， 
本 章 还 将 介绍 一 些 支持 JSON 的 、 较 为 流行 的 编程 语言 。 在 本 章 结束 时 ， 还 将 利用 不 同 的 
JSON 数据 类 型 编写 一 个 较为 基础 的 应 用 程序 。 

第 2 章 : JSON 结构 。 将 利用 多 种 数据 类 型 、 多 个 对 象 和 多 维 数据 进一步 丰富 JSON 
实现 。 

第 3 章 : 基于 JSON 的 AJAX 请 求 。 将 探讨 基于 JSON 数据 的 AJAX 请 求 ， 并 通过 
HTTP 请 求 传 递 JSON 数据 ， 以 及 处 理 此 类 问题 的 异步 技术 。 

第 4 章 : 跨 域 异步 请 求 。 介 绍 跨 域 的 异步 调用 这 一 概念 。 由 于 数据 将 在 域 间 进 行 传输 ， 
因而 用 户 有 必要 了 解 基于 填充 〈padding) 的 JSON 设 疑 概念 ， 即 JSONP。 
第 5 章 : JSON 调试 。 将 讨论 可 用 于 调试 、 验 证 和 格式 化 JSON 的 强大 工具 。 
第 6 章 : 构建 Carousel 应 用 程序 。 实 现 了 Carousel 应 用 程序 的 编程 思想 ， 以 及 应 
程序 所 需 的 设置 项 和 依赖 项 ， 如 jQuery 库 和 jQuery Cycle 插件 ， 并 使 用 Bootstrap 来 维护 
应 用 程序 的 基本 设计 。 

第 7 章 : JSON 的 替代 方案 。 讨 论 了 JSON 的 非 Web 开发 实现 ， 如 依赖 项 管理 器 、 
元 数据 存储 和 配置 存储 。 

第 8 章 : hapijs 简介 。 介 绍 在 Hapi 服务 器 中 实现 基于 JSON 的 配置 ， 并 借助 于 Hapi 


型 
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创建 RESTful API。 

第 9 章 : 在 MongoDB 中 存储 JSON 文档 。 讨论 MongoDB, 以 及 JSON 在 MongoDB 
中 的 使 用 方式 。 随 后 ， 本 章 还 将 介绍 如 何在 MongoDB 文档 上 执行 不 同 的 操作 。 

第 10 章 : 利用 JSON 配置 任务 管理 器 。 将 简要 描述 gulpjjs 库 。Gulp 是 一 个 功能 强 
大 的 库 ， 主 要 用 于 构建 任务 的 管理 并 提供 相关 工具 。 

第 11 章 : 实时 系统 和 分 布 系统 中 的 JSON。 通 过 实现 socket.io 服务 器 ， 使 读者 熟悉 
JSON 数据 在 实时 Web 应 用 程序 中 的 应 用 ， 以 及 Apache Kafka。 

第 12 章 : JSON 中 的 用 例 。 将 讨论 一 个 用 例 ， 并 考查 JSON 针对 不 同 领域 的 增强 方 
案 ， 以 及 移植 后 JSON 所 提供 的 各 种 优点 。 


阅读 方式 


i Web 开发 的 初学 者 ， 可 从 第 1 章 开始 阅读 ， 并 了 解 JSON 中 的 基础 
知识 。 另 外 ,前 5 章 懂 且 便于 操作 。 在 后 续 学 习 过 程 中 ， 读 者 可 尝试 实现 每 章 所 提 
供 的 代码 区 

随 着 时 间 的 推移 , 读者 还 可 在 StackOverflow 或 GitHub 等 论坛 上 进行 讨论 ， 以 确保 书 
中 的 所 有 问题 均 已 被 解决 。 


软件 环境 和 资源 下 载 


读者 可 访问 http://www.packtpub.com 并 通过 个 人 账户 下 载 示例 代码 文件 。 另 外 ， 在 
http://www.packtpub.com/support 中 注册 成 功 后 , 我 们 将 以 电子 邮件 的 方式 将 相关 文件 发 与 

读者 可 根据 下 列 步 骤 下 载 代 码 文件 。 

口 利用 电子 邮件 和 密码 登录 或 注册 我 们 的 网 站 www.packtpub.com。 

口 单 击 SUPPORT 选项 卡 。 

口 单 击 Code Downloads & Errata。 

口 在 Serach 文 本 框 中 输入 书 名 。 

当 文 件 下 载 完 毕 后 ， 确 保 使 用 下 列 最 新 版 本 软件 解压 文件 夹 。 

口 Windows 系统 下 的 WinRAR/7-Zip。 

口 Mac 系统 下 的 Zipeg/iZip/UnRarX。 

口 Linux 系统 下 的 7-Zip/PeaZip。 

另外 ， 读 者 还 可 访问 GitHub 获取 本 书 的 代码 包 ， 对 应 网 址 为 https://github.com/ 


了 PacktPublishing/JavaScriptrand-JSON-Essentials-Second-Edition 。 
此 外 ， 读 者 还 可 访问 https://github.com/PacktPublishing/ 以 了 解 丰 富 的 代码 和 视频 资源 。 
最 后 ， 读 者 还 可 访问 https://www.packtpub.com /sites/default/files/downloads/JavaScript 
andJSONEssentialsSecondEdition ColorImasges.pdf 以 下 载 并 查看 书 中 的 图 片 。 


本 书 约定 


本 书 通过 不 同 的 文本 风格 区 分 相应 的 信息 类 型 。 下面 通过 一 些 示例 对 此 类 风格 以 及 具 
体 含义 的 解释 予以 展示 。 
代码 块 如 下 所 示 。 


for (let j=0;j<designationCount;j++){ 
designations+= `, ${data json[i].designation.title[]]} 
下 


当 某 个 代码 块 希望 引起 读者 的 足够 重视 时 ， 一 般 会 采用 黑体 表示 ， 如 下 所 示 。 


const http = require('http'); 
const port = 3300; 
http.createServer((req, res) => { 
res.writeHead(200, { 
"Content-Type": "application/json" 
1); 
res.write (JSON.stringify({ 
greet : "Hello Readers!" 
和 
res end()s 
}) .listen (port); 
console.log( ‘Node Server is running on port : ${port}°) 


命令 行 输入 或 输出 则 采用 下 列 方式 表达 。 
$ mkdir test-node-app 

$ cd test-node-app 

$ npm init 

人 图标 则 表示 较为 重要 的 说 明 事 项 。 
全 图 标 则 表示 提示 信息 和 操作 技巧 。 


机 
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读者 反馈 和 客户 支持 


欢迎 读者 对 本 书 的 建议 或 意见 予以 反馈 。 

对 此 ， 读 者 可 向 feedback@packtpub.com 发 送 邮 件 ， 并 以 书 名 作为 邮件 标题 。 若 读者 
对 本 书 有 任何 疑问 ， 均 可 发 送 邮 件 至 questions@packtpub.com， 我 们 将 竭诚 为 您 服务 。 

若 读者 针对 某 项 技术 具有 专家 级 的 见解 , 抑或 计划 撰写 书籍 或 完善 某 部 著作 的 出 版 工 
作 ， 则 可 访问 www.packtpub.com/authors。 


勘误 表 
尽管 我 们 在 最 大 程度 上 做 到 尽善尽美 , 但 错误 依然 在 所 难免 如果 读者 发 现 廖 误 之 处 ， 
无 论 是 文字 错误 抑或 是 代码 错误 ， 还 望 不 音 赐教 。 对 此 ， 读 者 可 访问 http://www.packtpub. 
com/submit-errata， 选 取 对 应 书籍 ， 单 击 ErrataSubmissionForm 超 链接 ， 并 输入 相关 问题 的 
详细 内 容 。 
版 权 须 知 
- 直 以 来 ， 互 联网 上 的 版 权 问题 从 未 间断 ，Packt 出 版 社 对 此 类 问题 异常 重视 。 若 读 


者 在 互联 网 上 发 现 本 书 任意 形式 的 副本 , 请 告知 网 络 地 址 或 网 站 名 称 , 我 们 将 对 此 予以 处 
理 。 关 于 盗版 问题 ， 读 者 可 发 送 邮件 至 copyright@packtpub.com。 


问题 解答 


若 读者 对 本 书 有 任何 疑问 ， 均 可 发 送 邮件 至 questions@packtpub.com， 我 们 将 竭诚 为 
您 服务 。 
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第 1 章 JSON 简介 


JSON (JavaScript 对 象 表示 法 ) 是 一 种 非常 流行 的 数据 交换 格式 ， 最 先 由 Douglas 
Crockford 事 士 发 布 。 根 据 Douglas Crockford 所 言 ，JSON 通常 以 对 象 表示 法 而 存在 。 另 
外 ，Douglas Crockford 并 非 发 明了 JSON， 但 他 首次 制定 了 JSON 规范 并 设计 了 JSON， 
以 便 将 其 用 作 标准 格式 。 

本 章 主要 涉及 以 下 主题 。 
什么 是 ISON? 
利用 JSON 实现 简单 的 Hello World 程序 。 

JSON 中 的 数据 类 型 。 
JSON 所 支持 的 各 种 语言 。 
PHP 和 Python 简介 。 

对 于 第 一 次 听 说 JSON 这 一 术语 的 所 有 初学 者 来 说 ， 下 面 的 各 个 小 节 将 帮助 您 了 

解 JSON。 


OOOODO 


1.1 数据 交换 格式 JSON 


对 于 客户 端 和 服务 器 间 的 数据 交换 ， 当 定义 JSON 时 , 我们 可 以 说 这 是 一 种 基于 文本 
的 、 轻 量 级 的 、 具 有 人 类 可 读 的 数据 格式 。JSON 源 于 JavaScript， 与 JavaScript 对 象 非常 
相似 ， 但 独立 于 JavaScript。 另 外 ，JSON 独立 于 任何 语言 ， 但 所 有 流行 的 编程 语言 均 对 
JSON 数据 格式 提供 了 支持 ， 其 中 包括 C#、PHP、Java、C++、Python 和 Ruby。 

JSON 可 用 于 Web 应 用 程序 的 数据 交换 行为 。 考 查 如 图 1.1 所 示 的 简单 的 客户 端 - 服 
务 器 架构 。 假 设 客户 端 为 浏览 器 ， 并 向 服务 器 发 送 HTTP 请 求 : 随 后， 服务 器 按 预期 处 理 
请 求 并 提供 响应 结果 。 
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在 上 述 双 向 通信 中 ， 所 用 的 数据 格式 表示 为 一 个 序列 化 的 字符 串 ， 且 括号 中 包含 了 
键 - 值 对 组 合 一 一 这 便 是 JSON。 

在 JSON 之 前 ，XML 曾 被 视 作 所 选 的 数据 交换 格式 。XML 解析 需要 客户 端的 XML 
DOM 实现 来 接收 XML 响应 ， 然 后 使 用 XPath 查询 响应 以 访问 和 检索 数据 。 这 一 过 程 较 
为 烦琐 数据 查询 须 在 两 级 上 执行 : 首先 是 服务 器 端 ， 其 间 ， 数 据 通过 数据 库 被 查询 ; 其 
次 是 在 客户 端 使 用 XPath。 相 比 之 下 ，JSON 则 不 需要 特定 的 实现 ， 浏 览 器 中 的 JavaScript 
引擎 则 负责 处 理 JSON 的 解析 工作 。 

在 通过 网 络 连接 发 送 数据 时 ，XML 消息 通常 比较 繁重 和 宛 长 ， 并 占用 大 量 带宽 。 一 
旦 检索 到 XML 消息 , 该 消息 需要 加 载 至 内 存 中 以 被 处 理 。 下 面 分 别 考查 XML 格式 和 JSON 
格式 的 students 数据 传输 。 

下 列 代码 展示 了 XML 格式 示例 。 


<?xml Version="1.0" encoding="UTF-8" ?> 
<!-- This is an example of student feed in XML --> 
<students> 
<student> 
<studentid>101</studentid> 
<firstname>John</firstname> 
<lastname>Doe</lastname> 
<classes> 
<class>Business Research</class> 
<class>Economics</class> 
<class>Finance</class> 
</classes> 
</student> 
<student> 
<studentid>102</studentid> 
<firstname>Jane</firstname> 
<lastname>Dane</lastname> 
<classes> 
<class>Marketing</class> 
<class>Economics</class> 
<class>Finance</class> 
</classes> 
</student> 
</students> 


下 列 代 码 展 示 了 JSON 格式 示例 。 


/* This is an example of student feed in JSON */ 
{ 


第 1 章 JSON 简介 村 


"students": { 
mon: { 


"studentid": 101, 
"firstname": "John", 
"lastname": "Doe"， 


"classes": [ 


"Business Research", 
"Economics", 


"Finance" 
] 
}, 
min 


"studentid": 102, 
"firstname": "Jane", 
"lastname": "Dane", 


"classes": [ 


"Marketing", 


"Economics" 
"Finance" 
] 
} 
1 
| 


需要 注意 的 一 点 是 ， 


a 


与 JSON 相 比 时 ，XML 消息 尺寸 较 大 ， 而 此 处 仅 展示 了 两 个 


记录 。 实 时 传 入 数据 至 少 包含 数 千 个 记录 。 需 要 注意 的 另 一 点 是 ， 由 服务 器 生成 并 通过 互 
联网 传输 的 数据 量 已 经 很 大 ， 而 XML 的 宛 长 使 得 数据 量变 得 更 大 。 在 移动 设备 时 代 ， 智 
能 手机 和 平板 电脑 日 益 流行 ， 在 速度 较 慢 的 网 络 上 传输 大 量 数据 将 会 导致 页 面 加 载 缓慢 、 
死机 、 较 差 的 用 户 体验 和 访问 量 的 降低 。 目 前 ，JSON 已 经 成 为 首选 的 互联 网 数据 交换 格 
式 ， 以 避免 前 面 提 到 的 各 类 问题 。 由 于 JSON 用 于 在 互联 网 上 传输 序列 化 的 数据 ， 因 此 我 


们 需要 了 解 其 MIME 类 型 。 


图 1.2 显示 了 请 求 数据 如 何 发 送 至 之 前 提 到 的 客户 端 -服务 器 架构 中 。 


多 用 途 互 联网 邮件 扩展 (Multipurpose Intemet Mail Extensions，MIME ) 类 型 是 一 种 
互联 网 媒体 类 型 ,这 是 由 两 部 分 构成 的 内 容 标识 符 ， 进 而 在 互联 网 上 传输 。MIME 类 型 通 
过 HTTP 请 求 和 HTTP 响应 的 HITP 头 文件 传递 MIME 类 型 可 视 为 服务 器 和 浏览 器 间 的 


内 容 类 型 通信 。 总 体 来 说 ， 
HTTP 请 求 或 HTTP 响应 


MIME 类 型 将 包含 两 个 或 多 个 部 分 ， 并 提供 与 数据 类 型 (在 
Ph 发 送 ) 相关 的 浏览 器 信息 。JSON 数据 的 MIME 类 型 表示 为 


应 用 程序 /json。 如 果 MIME 类 型 头 文件 没有 通过 浏览 器 发 送 ， 它 会 将 传 入 的 JSON 视 为 


纯 文 本 。 
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头 体 
mime-type: 
application/ison {JSON} 浏览 器 


头 体 


mime-type: 


application/json JSONY 


图 12 
0 现在 ，content-type 键 (派生 自 mime-type 自身 ) 可 用 于 数据 头 中 


1.2 基于 JSON 的 Hello World 程序 


前 述 内 容 介绍 了 JSON 的 基本 知识 ， 接 下 来 像 往 常 一 样 编写 一 个 Hello World 应 用 程 
序 ， 对 应 的 代码 片段 如 下 所 示 。 
<!DOCTYPE html> 
<html> 
<head> 
<title>Test Javascript</title> 
<script type="text/javascript"> 
let hello world = {"Hello":"World"}; 
alert (hello world.Hello); 
</script> 
</head> 
<body> 
<h2>JSON Hello World</h2> 
<p>This is a test program to alert Hello world!</p> 
</body> 
</html> 


当 在 浏览 器 中 被 调用 时 ， 上 述 程序 将 在 屏幕 上 显示 Hello World。 

人 此 处 使 用 了 新 的 ECMAScript 标识 符 let， 其 作用 域 与 一 般 的 变量 声明 标识 符 var 
有 所 不 同 。 前 者 的 作用 域 是 最 近 的 函数 块 ， 而 后 者 的 作用 域 则 是 最 近 的 封闭 块 。 对 此 ， 读 
者 可 访问 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let 以 
了 解 更 多 信息 。 
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此 处 应 特别 关注 <script> 标 签 之 间 的 脚本 ， 如 下 所 示 。 

let hello world = {"Hello":"World"}; 

alert (hello world.Hello); 

此 处 首先 生成 一 个 JavaScript 变量 ， 并 利用 JavaScript 对 象 初始 化 该 变量 。 类 似 于 从 
JavaScript 对 象 中 检索 数据 ， 我 们 也 可 采用 键 - 值 对 检索 数值 。 简 单 地 讲 ，JSON 表示 为 一 
个 键 - 值 对 集合 。 其 中 ， 每 个 键 表示 为 数值 在 计算 机 上 的 存储 位 置 的 引用 。 下 面 让 我 们 思 
考 一 下 ,如果 全 部 工作 是 分 配 JavaScript 对 象 , 为 何 我 们 需要 使 用 JSON。 答案 在 于 , JSON 
是 一 种 完全 不 同 的 格式 ， 而 不 像 JavaScript 那样 是 一 种 语言 。 

人 JSON 键 和 值 必须 用 双 引 号 括 起 来 。 如 果 任何 一 个 都 包含 在 单 引号 中 ， 则 将 会 得 
到 一 条 错误 消息 。 

接 下 来 快速 浏览 一 下 JSON 和 JavaScript 对 象 之 间 的 相似 性 和 差异 。 如 果 打算 创建 一 
个 与 之 前 hello_world JSON 示例 类 似 的 JavaScript 对 象 ， 对 应 代码 如 下 所 示 。 

let hello world = {"Hello":"World"}; 

此 处 的 差别 在 于 ， 键 并 未 包含 于 双 引 号 中 。 由 于 JSON 键 定义 为 一 个 字符 串 ， 因 而 可 
对 其 使 用 任意 有 效 的 字符 串 。 例 如 ， 可 在 键 中 使 用 空格 、 特 殊 字符 和 连 字符 ， 则 这 在 常规 
的 JavaScript 对 象 中 均 是 无 效 的 ， 如 下 所 示 。 

let hello world = {"test-hello":"World"}; 

当 在 键 中 使 用 特殊 字符 、 连 字符 或 空格 时 ,我 们 在 对 其 进行 访问 时 须 格外 小 心 ， 如 下 
所 示 。 

alert (hello world.test-hello); //doesn't work 

上 述 JavaScript 语句 无 法 正常 工作 的 原因 在 于 ,JavaScript 不 接受 包含 特殊 字符 、 连 字 
符 或 字符 串 的 键 。 因 此 ， 需 要 通过 某 种 方法 检索 数据 ， 在 这 个 方法 中 ， 我 们 将 JSON 对 象 
作为 一 个 包含 字符 串 键 的 关联 数组 来 处 理 ， 如 下 所 示 。 

alert (hello world["test-hello"]); //Hurray! It work 

二 者 间 的 男 一 个 差别 在 于 ，JavaScript 对 象 可 在 内 部 携带 函数 ， 而 JSON 对 象 则 无 法 
携带 任何 函数 。 下 列 示例 设置 了 一 个 属性 getFullName， 其 中 包含 了 一 个 函数 并 在 被 调 月 
时 显示 名 称 John Doe。 


| 
"studentid": 101, 
"firstname": "Johnn， 
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"lastname": "Doe"， 
"isstudent": true, 
"classes": [ 
"Business Research", 
"Economics", 
"Finance" 
]， 
"getFullName": function(){ 
alert(‘${this.firstname} S$Sfthis.lastname}'\) 7 
} 
} 
0 注意 ,字符 囊 插 值 特性 是 一 个 新 的 ES 特性 ， 可 以 在 表达 式 “"'$S{}，” 中 编写 变 
量 和 函数 时 使 用 , 该 表达 式 只 适用 于 波浪 引号 ( 即 在 键盘 波浪 线 “~” 键 下 方 的 引号 “*”)， 
而 不 适用 于 其 他 类 型 的 引号 
最 后 ， 二 者 间 最 大 的 差别 在 于 ，JavaScript 对 象 并 不 是 一 种 数据 交换 格式 ， 而 JSON 
的 唯一 的 目的 即 用 作 一 种 数据 交换 格式 。 
接 下 来 将 讨论 JSON 的 内 存 分 配 。 


1.3 ”如 何在 内 存 中 存储 JSON 


本 节 主 要 在 JSON 和 JavaScript 对 象 之 间 进 行 比较 。 如 前 所 述 ，JSON 是 对 象 的 字符 
串 化 表达 ， 为 了 从 概念 上 理解 JSON 的 存储 过 程 ， 考 查 下 列 示例 代码 。 

let completeJSON = { 

"hello": "World is a great place", 
"num" 5 

} 

下 面 将 在 完整 的 JSON 上 执行 相关 操作 ， 进 而 对 这 一 概念 进行 划分 。 这 里 ， 完 整 的 
JSON 是 指 一 类 整体 结构 ， 而 不 是 键 - 值 对 的 子 集 。 因 此 ， 第 一 项 操作 是 序列 化 。 序 列 化 
是 删除 空格 以 及 转 义 内 部 引号 〈 如 果 存 在 ) 的 过 程 ， 以 便 将 整个 结构 转换 为 单个 字符 串 
如 下 所 示 。 

let stringifiedJSON = JSON.stringify(completeJSON); 

如 果 在 控制 台 输 出 变量 stringifiedJSON， 对 应 结果 如 下 所 示 。 

"{"hello":"World is a great place", "num":5}" 


在 当前 示例 中 ，JSON 全 部 存储 为 常规 的 字符 串 ， 如 图 1.3 所 示 。 
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stringifiedJSON 
个 


"{"hello":"World is great place", "num" :5}”" 


图 1.3 


在 上 述 概念 图 1.3 中 , 内 存 位 置 的 slot 1 通过 包含 单一 输入 字符 串 值 的 stringifiedJSON 
表示 。 下 一 个 内 存 位 置 的 存储 类 型 可 能 是 解析 的 JSON。 通 过 前 述 代码 片段 ， 如 果 对 
stringifiedJSON 进行 解析 ， 如 下 所 示 。 

let parsedJSON = JSON.parse (stringifiedJsON); 

对 应 的 输出 结果 如 下 所 示 。 

{ 

"hello": "World is a great place", 
nan 5 

有 

在 上 述 JSON 表达 结果 中 ， 可 以 清楚 地 看 到 ， 所 得 到 的 值 是 一 个 对 象 ， 而 不 是 一 个 字 
符 串 。 进 一 步 讲 ， 这 是 一 种 JavaScript 对 象 表示 法 。 当 前 ， 在 内 存 中 存储 JSON 这 一 概念 
与 JavaScript 对 象 相同 。 

@ 假设 我 们 使 用 JavaScript 引擎 解释 代码 。 


在 当前 示例 中 ， 对 应 场景 则 完全 不 同 ， 如 图 1.4 所 示 。 
在 考查 了 内 存 表达 方式 之 后 ， 可 以 得 到 以 下 结论 以 供 参考 。 

口 对 象 存储 不 是 顺序 的 ， 内 存 插 档 是 随机 选择 的 。 在 当前 示例 中 是 slot 4 和 slot 7。 
口 存储 在 每 个 插 槽 中 的 数据 是 对 不 同 内 存 位 置 的 引用 ， 并 可 将 其 称 作 地 址 。 

在 当前 示例 中 ， 我 们 可 得 到 包含 地 址 objecthello 的 第 4 个 内 存 插 槽 。 目 前 ， 该 地 址 
指向 不 同 的 内 存 位 置 。 假 设 对 应 位 置 为 第 3 个 内 存 插 模 ， 并 被 JavaScript 执行 上 下 文 所 处 
理 。 因 此 ，parsedJSON hello 值 被 第 3 个 内 存 插 槽 所 持 有 。 
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内 存 示 意图 
stringifiedJSON 
个 


"{"hello" :"World is great place" ,num" :5}" 


objecthello slot5 | slot 6 
parsedJSON < 一 | 


objectnum slot 8 | slotN 


图 14 
1.4 JSON 的 数据 类 型 


本 节 将 讨论 更 加 复杂 的 JSON 示例 , 并 介绍 JSON 所 支持 的 全 部 数据 类 型 。 具 体 来 说 ， 
JSON 文 持 6 种 数据 类 型 ， 即 字符 串 、 数 字 、 布 尔 值 、 数 组 、 对 象 和 null， 如 下 所 示 。 
{ 
"studentid": 101, 
"firstname": "John", 
"lastname": "Doe", 
"isstudent": true, 
acores™: [407 SO 
"courses": { 
"major": "Finance", 
"minor": "Marketing" 
1 
} 


上 述 示 例 中 包含 了 不 同 数据 类 型 的 键 - 值 对 ， 下 面 对 此 逐一 加 以 讨论 。 
口 "studentid" 引 用 的 值 的 数据 类 型 表示 为 一 个 数字 ， 如 下 所 示 。 
"studentid": 101, 
口 "firstname" 引 用 的 值 的 数据 类 型 是 一 个 字符 串 ， 如 下 所 示 。 

"firstname": "John", 

口 在 随后 的 代码 片段 中 , "isStudent" 引 用 的 值 的 数据 类 型 为 一 个 布尔 值 ， 如 下 所 示 。 


"isstudent": true, 
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口 "scores" 引 用 的 值 的 数据 类 型 为 一 个 数组 ， 如 下 所 示 。 


”Scores”: [40; 50] 


口 "courses"3 


wcourses": { 
"major™ 
"minor™": 


} 


| 用 的 值 的 数据 类 型 为 一 个 对 象 ， 如 下 所 示 。 


"Finance", 
"Marketing" 


如 前 所 述 ，JSON 支持 6 种 数据 类 型 ， 分 别 为 字符 串 、 数 字 、 布 尔 值 、 数 组 、 对 象 和 
null。 需 要 注意 的 是 ，JSON 支持 null 数据 ， 且 实时 业务 实现 需要 准确 的 信息 。 某 些 时 候 ， 


可 能 会 出 现 空 字符 


替换 null 的 情况 ， 但 这 是 不 准确 的 ， 接 下 来 考查 一 个 示例 ， 如 下 所 示 。 


let nullVal = ""; 


alert (typeof 


nullVal); //prints string 


nullVal = null; 


alert (typeof 
@ 数组 和 nu 
在 上 述 示例 中 ， 


nullVal); //prints object 
]1 值 均 为 JavaScript 中 的 对 象 


我 们 执行 了 一 些 简单 的 操作 ， 例 如 确定 空 字符 串 的 类 型 。 此 处 采用 了 


typeof 运算 符 ， 它 接收 一 个 操作 数 并 返回 该 操作 数 的 数据 类 型 ， 而 下 一 行 则 确定 null 值 的 


下 列 代码 实现 了 JSON 对 象 并 对 值 进行 检索 。 


<!DOCTYPE html> 


<html> 
<head> 


<script type="text/javascript"> 


let comp. 


lexJson = { 


"studentid": 101, 
"firstname": "John", 
"Jastname": "Doe", 
"isSstudent": true, 


"SEOre 


s": [40, 50], 


"courses": { 
"major": "Finance", 
"minor": "Marketing" 


} 
}; 
</script> 
</head> 
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<body> 
<h2>Complex Data in JSON</h2> 
<p>This is a test program to load complex json data into a variable</p> 
</body> 
</html> 
当 从 变量 complexJson 中 检索 id 时 ， 需 要 执行 下 列 代码 。 
alert (complexJson.studentid); //101 
当 从 complexJson 变量 中 检索 name 时 ， 需 要 执行 下 列 代码 。 


alert (complexJson.firstname); //John 


下 列 代码 则 从 变量 complexJson 中 检索 isStudent。 


alert (complexJson.isstudent); //true 


相 比 较 而 言 ， 从 数组 和 对 象 中 获取 数据 则 稍 显 复 杂 
码 展示 了 如 何 从 数组 中 检索 值 。 


alert (complexJson.scores[1]); //50 


上 述 代 码 从 scores 数组 中 检索 第 2 个 元 素 ( 数 组 始 于 0, 因而 其 索引 为 1)。 虽 然 scores 
在 complexJson 中 表示 为 一 个 数组 ， 但 仍 视 为 一 个 常规 的 键 - 值 对 。 当 访问 键 时 ， 须 采用 
不 同方 式 对 此 进行 处 理 。 在 访问 键 时 ， 解 释 器 首先 需要 评估 如 何 获取 其 值 的 数据 类 型 。 如 
果 检 索 到 的 值 为 字符 串 、 数 字 、 布 尔 值 或 null， 则 在 该 值 上 无 须 执行 进一步 的 操作 ， 而 对 
于 数组 或 对 象 ， 还 须 进一步 考查 该 值 的 依赖 关系 。 
当 从 JSON 对 象 内 部 的 对 象 中 检索 某 个 元 素 时 , 需要 访问 该 值 所 引用 的 键 , 如 下 所 示 。 


alert (complexJson.courses.major); //Finance 


日 于 对 象 不 包含 数值 索引 ，JavaScript 将 重新 排列 对 象 中 数据 项 的 顺序 。 读 者 可 能 已 
经 注意 到 ，JSON 对 象 初始 化 阶段 的 键 - 值 对 顺序 与 访问 时 的 顺序 有 所 不 同 ， 但 我 们 不 必 
对 此 过 虑 。 在 这 期 间 并 不 存在 数据 丢失 ，JavaScript 仅 对 对 象 重 新 排序 而 已 。 


必须 遍历 数组 或 对 象 。 下 列 代 


1.5 支持 JSON 的 编程 语言 


前 述 内 容 讲 述 了 JavaScript 中 的 解释 器 如 何 支 持 SON。 除 此 之 外 ， 还 存在 其 他 一 些 
编程 语言 对 JSON 实现 提供 了 支持 。 例 如 PHP、Python、C#、C++、Java 均 对 JSON 数据 
交换 格式 提供 了 较 好 的 支持 。 所 有 支持 面向 服务 架构 的 流行 编程 语言 都 理解 JSON 及 其 数 
据 传输 实现 的 重要 性 ， 因 此 为 JSON 提供 了 强大 的 支持 。 
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接 下 来 我 们 来 看 一 下 JSON 在 其 他 语言 (例如 PHP 和 Python) 中 是 如 何 实现 的 。 

1.5.1 PHP 中 的 JSON 实现 

就 构建 Web 应 用 程序 来 说 ，PHP 也 是 一 种 较为 流行 的 语言 ， 该 语言 是 一 种 服务 器 端 
脚本 语言 ， 以 使 开发 人 员 能 够 构建 应 用 程序 ， 并 在 服务 器 上 执行 相关 操作 、 连 接 数 据 库 尼 
执行 CRUD (创建 、 读 取 、 更 新 和 删除 ) 操作 ， 同 时 对 实时 应 用 程序 提供 安全 的 环境 。 自 
PHP 5.2.0 起 ，JSON 即 构建 于 PHP 内 核 中 ， 这 也 使 得 用 户 不 必 执 行 复杂 的 安装 和 配置 操 
作 。 考 虑 到 JSON 仅 是 一 种 数据 交换 格式 ，PHP 中 包含 了 两 个 功能 项 ,分 别 成 立 通过 请 求 
传 入 的 JSON， 或 生成 通过 响应 发 送 的 JION。PHP 是 一 种 弱 类 型 语言 ， 因 而 我 们 将 使 用 
存储 于 PHP 数组 中 的 数据 ， 并 将 该 数据 转换 为 JSON 字符 串 ， 进 而 用 于 数据 输入 。 下 面 
再 次 考查 之 前 讨论 的 student 示例 ， 并 在 PHP 中 构建 ， 随 后 将 其 转换 为 JSON。 


和 注意 ， 当 前 示例 仅 用 于 展示 利用 PHP 生成 JSON 


<?php 
$student = array( 
"id"=>101, 


"name"=>"John Doe", 

"isstudent"=>true, 

"scores"=>array (40, 50); 

"courses"=>array( 
"major Finance", 
"minor"=>"Marketing" 

); 

); 


//Echo is used to print the data 
echo json encode ($student); //encoding the array into JSON string 


ee 
当 运 行 PHP 脚本 时 ， 需 要 安装 PHP; 当 通 过 浏览 器 运行 PHP 脚本 时 ， 则 需要 使 


用 到 一 个 Web 服务 器 ， 例 如 Apache 或 IS。 在 第 3 章 中 与 AJAX 协同 工作 时 ， 将 详细 讨 


对 应 的 脚本 在 启动 过 程 中 将 初始 化 变量 ， 并 分 配 包 含 学 生 信息 的 关联 数组 。 随 后 ， 变 
量 $students 将 被 传递 至 json_encode() 函 数 中 ,该 函数 将 该 变量 转换 为 JSON 字符 串 。 当 运 
行 脚本 时 ， 将 生成 一 个 有 效 的 响应 结果 ， 并 将 其 公开 为 JSON 数据 输入 ， 以 供 其 他 应 用 程 
序 使 用 。 
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对 应 的 输出 结果 如 下 所 示 。 


{ 
"id": 101, 
"name": "John Doe"， 
"isstudent": true, 
msonsse LAN SO 


”COUFSGS7 

{ 
"major": "Finance", 
"minor": "Marketing" 


} 
1 


至 此 , 我 们 通过 简单 的 PHP 脚本 生成 了 第 一 个 JSON。 其 中 , 对 应 方法 解析 通过 HTTP 
请 求 传 入 的 JSON， 对 于 发 送 HTTP 请 求 并 以 JSON 格式 发 送 数据 的 应 用 程序 来 说 ， 这 种 


情况 十 分 常见 。 


人 该 示例 仅 展示 如 何 将 JSON 导入 PHP 中 


$student = '{"id":101,"name":"John 
Doe", "isstudent":true,"scores":[40,50], "courses":{"major": "Finance", 
"minor":"Marketing"}}'; 

//Decoding JSON string into php array 

print r(json decode ($student)); 


对 应 的 输出 结果 如 下 所 示 。 


Object( 
[id] => 101 
[name] => John Doe 
[isstudent] => 1 
[scores] => Array([0] => 40[1] => 50) 
[courses] =>stdClass 
Object ( [major] => Finance [minor] => Marketing) 


) 
1.5.2 Python 中 的 JSON 实现 


Python 是 一 种 非常 流行 的 脚本 语言 ， 被 广泛 地 应 用 于 执行 字符 串 操作 和 构建 控制 台 应 


程序 中 。Python 可 从 JSON API 中 获取 数据 ， 一 旦 检索 到 JSON 数据 ， 对 应 结果 将 被 视 
为 JSON 字符 串 。 当 在 JSON 字符 串 上 执行 任意 操作 时 , Python 提供 了 相应 的 JSON 模块 。 
JSON 模块 是 许多 功能 强大 的 函数 的 组 合 ， 可 用 于 解析 JSON 字符 串 。 
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人 当前 示例 仅 用 于 展示 如 何 利用 Python 生成 JSON。 


import json 


student = [{ 
"studentid": 101, 
"firstname": "John", 
"lastname": "Doe"， 
## make sure we have first letter capitalize in case of boolean 
"isstudent": True, 
"cores™: [A0, ‘SO0Ols 
"courses": { 
"major Finance", 
"minor": "Marketing" 
1 
}] 


print json.dumps (student) 

该 示例 中 使 用 了 较为 复杂 的 数据 类 型 ,例如 元 组 和 字典 , 分 别 用 于 存储 分 数值 和 课程 。 
此 处 并 不 打算 对 Python 的 数据 类 型 予以 深入 讨论 。 

人 当 运 行 上 述 脚本 时 ， 需 要 安装 Python 2。 在 任何 *nix 操作 系统 上 ， 均 预 安装 了 
Python 2。 目 前 ， 读 者 可 访问 https://www.jdoodle.com/pythonprogramming-online， 并 利用 
在 线 执行 器 运行 当前 代码 

对 应 的 输出 结果 如 下 所 示 。 

[{"studentid": 101, "firstname": "John", "lastname": "Doe", "isStudent": 


true, "courses": {"major": "Finance","minor": "Marketing"}, "scores": 
[40,50]}] 


其 中 ， 键 可 能 会 根据 数据 类 型 重新 排序 。 另 外 ， 也 可 使 用 sort_keys 检索 原始 顺序 。 
下 面 简要 介绍 一 下 JSON 在 Python 中 的 解码 方式 。 
@@ 该 示例 仅 用 于 展示 如 何 将 JSON 导入 Python 中 。 


student json = '''[{"studentid": 101, "firstname": "John", "lastname": 
"Doe", "isstudent": true, "courses": {"major": "Finance", "minor": 
"Marketing"}, "scores": [40, 50]}]'"'" 


print json.loads (student json) 


其 中 ，JSON 字符 串 存储 至 student json 中 ， 同 时 使 用 了 Python 中 JSON 模块 提供 的 
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json loads() 方 法 。 

对 应 的 输出 结果 如 下 所 示 。 

1 

{ 
u 'studentid': 101, 
u "firstname': u 'John', 
u 'lastname': u 'Doe', 
u 'isstudent': True, 
Deouzses 


u "major': u "Finance' 
u "minor': u 'Marketing' 
}, 
uu "scores's [40y 50] 
本 


1.6 本 章 小 结 


本 章 介 绍 了 JSON 方面 的 基础 知识 、JSON 的 历史 以 及 JSON 的 优点 ( 相 比 于 XML)。 
其 间 ， 我 们 还 创建 了 第 一 个 JSON 对 象 ， 并 对 其 进行 了 成 功 的 解析 。 另 外 ， 本 章 还 讨论 了 
JSON 所 支持 的 所 有 数据 类 型 。 最 后 ， 我 们 通过 一 些 示 例 展示 了 JSON 在 其 他 语言 中 的 实 
现 方式 。 本 章 内 容 为 后 续 章节 中 将 要 学 习 的 复杂 概念 (例如 访问 多 级 JSON， 并 在 其 上 执 
行 数据 存储 操作 〉 葛 定 坚 实 的 基础 。 


第 2 章 JSON 结构 


第 1 章 讨论 了 JSON 的 基础 知识 、JSON 如 何 嵌 入 HIML 文件 中 ,以 及 如 何在 简单 的 
JSON 对 象 上 执行 基本 操作 ， 例 如 键 的 访问 。 本 章 主要 涉及 以 下 主题 。 

口 插入 外 部 JavaScript。 

口 访问 多 级 JSON 对 象 。 

口 在 JSON 数据 中 执行 修改 操作 。 

现在 让 我 们 向 前 迈进 一 步 ， 并 使 用 更 大 、 更 复杂 、 更 接近 于 现实 世界 中 使 用 的 JSON 
对 象 。 


2.1 插入 外 部 JavaScript 


在 现实 的 应 用 程序 中 ，JSON 可 作为 异步 请 求 的 响应 结果 ,或 者 从 JSON 提要 (feed) 
中 被 检索 。 网 站 一 般 会 通过 HTML、CSS 和 JavaScript 提供 精美 的 视觉 化 用 户 界面 。 但 有 
些 情况 下 ,数据 供 应 商 只 专注 于 获取 数据 ， 而 数据 提要 则 用 于 这 一 目的 。 整体 来 讲 ， 提 要 
是 提供 数据 的 一 种 粗糙 方式 ， 其 他 人 可 对 其 加 以 复 用 ， 以 在 网 站 上 显示 数据 ; 或 者 获取 数 
据 并 在 其 上 执行 相关 算法 。 这 一 类 数据 提要 一 般 较 大 ， 且 无 法 直接 嵌入 脚本 标签 中 。 接 下 
来 讨论 如 何在 HIML 文件 中 包含 外 部 JavaScript 文件 。 

以 下 内 容 显示 了 external-js.html 文件 中 的 代码 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Include external javascript</title> 
<script type="text/javascript" src="example.js"></script> 
<script type="text/javascript"> 
alert (x); 
</script> 
</head> 
<body> 
<h2>Include external javascript</h2> 
<p>This is a test program to learn how external javascript files can 
be included</p> 
</body> 
</html> 
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引 


前 示例 中 包含 了 example.js 这 一 外 部 JavaScript 文件 ， 如 下 所 示 。 

const x = "This is value of x and is being retrieved from external js 

file"; 

@@ 注意 ,const 关键 字 用 作 交 量 标识 符 以 表示 不 可 变数 据 。 一 旦 声明 后 ， 常 量 x 便 
无 法 被 重新 赋值 。 对 此 ， 读 者 可 访问 https://developer.mozilla.org/en-US/docs/Web/JavaScript/ 
Reference/Statements/const 以 了 解 更 多 内 容 。 


当 从 external-js.html 文件 中 访问 位 于 examplejs 文件 中 的 常量 x 时 , 需要 在 HTML 文 
件 的 脚本 标签 中 编写 程序 。 

examplejs 文件 须 在 与 external-js.html 相同 的 文件 夹 中 被 创建 ， 对 应 的 文件 夹 结构 如 
图 2.1 所 示 。 


FOLDERS 
了 my chapter 2 


/x* example.js 


<> external-js.html 


图 2.1 
2.2 访问 JSON 中 的 对 象 


前 述 内 容 讨 论 了 如 何 生成 脚本 调用 ， 以 获取 外 部 JavaScript 文件 ， 下 面 采 用 相同 的 技 
术 导 入 JSON 提要 。 对 此 , 我 们 生成 了 包含 100 条 记录 的 employee JSON 数据 提要 以 供 测 
试 使 用 。 在 遍历 JSON 提要 时 ， 应 注意 数据 的 排列 方式 。 数 据 提要 中 的 键 是 基本 的 员工 信 
息 ， 如 员工 编号 、 出 生日 期 、 姓名、 性 别 、 雇 用 日 期 、 职称， 以 及 获得 职称 的 日 期 。 另 外 ， 
少数 员工 在 整个 任职 内 拥有 同一 职务 ， 而 有 些 员工 则 拥有 多 个 职务 。 

注意 ,这 一 JSON 文件 将 视 为 代码 文件 的 一 部 分 内 容 而 存在 。 

考查 下 列 JSON 存储 ， 我 们 将 在 此 基础 上 执行 相关 操作 。 

let data json = [ 


{ 
"emp no™: "10001"， 
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考虑 到 将 处 理 复杂 的 JSON 数据 提要 ， 对 此 ， 需 要 将 数据 提要 保存 至 某 个 文件 中 。 在 
data json_feed html 文件 中 ， 我 们 导入 了 datajson 文件 ， 该 文件 与 HTML 文件 处 于 同一 个 
文件 夹 中 。 
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需要 注意 的 是 , JSON 提要 被 赋予 一 个 名 为 data_json 的 变量 中 ; 当 访 问 JSON 提要 时 ， 
需要 在 data_ json_feed.html 文件 中 使 用 该 变量 ， 如 下 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Test Javascript</title> 
<script type="text/javascript" src="data.js"></script> 
<script type="text/javascript"> 
console.1log (data json); 
</script> 
</head> 
<body> 
<h2>Include External JSON</h2> 
<p>This is a test program to Learn How external JSON 
feed stored in files can be included. 
</p> 
</body> 
</html> 


另 一 个 需要 注意 的 是 ，console.log0 新 方法 的 使 用 。Mozilla Firefox、 谷 歌 Chrome 和 
苹果 Safari 等 浏览 器 配置 了 一 个 Console 面板 ， 用 于 运行 时 的 JavaScript 的 开发 和 调试 。 
男 外 ，JavaScript 中 的 alert0 函 数 的 使 用 鉴于 其 突 元 的 行为 而 受到 限制 。 相 比 之 下 ， 
console.log 则 不 具备 这 种 干扰 性 ， 它 将 消息 记录 到 Console 面板 中 。 自 此 ， 我 们 将 不 再 使 
用 alert() 方 法 ， 而 是 使 用 console.log() 方 法 将 数据 输出 至 Console 窗口 中 。 谷 歌 Chrome 和 
苹果 Safari 均 配 置 了 开发 工具 ; 当 查 看 Console 时 , 可 右 击 Web 页 面 并 选择 Inspect Element 
选项 。 另外， 两 个 浏览 器 均 配 置 了 Console 选项 卡 并 可 与 日 志 记 录 协 同 工 作 。Firefox 则 依 
赖 于 Firebug， 第 5 章 将 讨论 Firebug 的 安装 步骤 ， 如 图 2.2 所 示 。 


Elements 。 Console Sources Network ”Performance Memory Application Securty Audits 
Default levels Y 


data ison feed,html:7 


TY) [fo}, {oe}, {fH 
| io; "16991"，birth_date: "1989-89-02", -了 所 Je: “Facello", gender: "M", 
tty 


"birth_date: "1979-69-92"， gender: 
", birth_date: "1960-89-02", first_name: "Jenny", last_nane: "Souza", gender: "F" 


图 322 


当 把 data_ json_feed.html 文件 载 入 至 Firefox 浏览 器 时 ,打开 Console 窗口 并 单 击 DOM 
选项 卡 ， 我 们 将 看 到 一 个 包含 100 个 employee 对 象 的 列表 。 如 果 对 象 较 小 且 包含 1 或 2 
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个 对 象 ， 可 优先 使 用 索引 对 其 进行 访问 。 在 当前 示例 中 ， 鉴 于 包含 了 大 量 的 子 对 象 ， 
无 法 根据 静态 索引 定位 对 象 。 对 此 ， 可 查看 下 列 示例 代码 。 


/** Not realistic, unless we are targeting a Specific key.**/ 
Ex: console.log(employees[1] .emp no); 


2.3 执行 复杂 的 操作 


当 处 理 对 象 数组 时 ， 可 通过 某 种 迭代 方法 解决 此 类 问题 。 对 此 ， 我们 将 采用 一 种 兴 代 
方案 一 次 定位 一 个 对 象 。 当 访问 该 对 象 时 ， 则 无 须 再 次 对 其 进行 定位 ， 从 而 维护 数据 的 完 
整 性 ， 避 免 多 次 访问 同一 对 象 并 消除 元 余 操作 。 在 JavaScript 中 ， 循 环 语句 表示 为 while 
循环 和 for 循环 。 接 下 来 考查 如 何 使 用 循环 遍历 employee 数组 ， 对 应 代码 如 下 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Test Javascript</title> 
<script type="text/javascript" src="data.js"></script> 
<script type="text/javascript"> 
console.1log(data json); 
const employeeCount = data json.1length; 
for(let i=0;i<employeeCount;i++){ 
console.log ("Employee number is ", data json[i].emp no); 
} 
</script> 
</head> 
<body> 
<h2>Parse JSON Feed using While</h2> 
<p>This is a test program to learn how external JSON 
feed stored in files can be parsed using the for Loop.</p> 
</p> 
</body> 
</html> 


BH 
如 


在 employees_traversal.html 文件 中 , 我 们 导入 了 datajs 文件 。datajs 文件 中 的 data json 
变量 包含 了 导入 当前 HTML 页 面 中 的 对 象 数 组 。 在 <scrip 亿 标签 中 , 此 处 设置 了 两 个 变量 。 
其 中 ， 变 量 i 加 载 了 一 个 计数 器 :employeeCount 变量 则 加 载 了 data_json 中 全 部 对 象 的 数 
量 。 当 检索 数组 中 的 数据 项 数量 时 ， 可 采用 JavaScript 提供 的 .length 属性 。for 循环 中 涵盖 
了 3 个 较为 的 代码 块 , 即 条 件 语句 、 执 行 语 句 , 以 及 基于 对 应 条 件 的 递增 或 递减 语句 。 
下 面 分 别 对 其 进行 简要 介绍 。 
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let i=0; 


这 里 ， 变 量 i 初始化 为 0， 对 应 条 件 表示 为 : 如 果 0 小 于 常量 data json 中 数据 项 的 数 
量 ， 则 执行 循环 部 分 。 

i<employeeCount 

如 果 条 件 为 tue， 则 执行 循环 中 的 语句 ， 直 至 遇 到 递增 条 件 ， 如 下 所 示 。 

//We are using incremental operation 

i++; 

//Incase of decremental operation use i-- 

一 旦 到 达 北 增 运 算 符 , i 值 加 1, 并 返回 for 循环 的 最 初步 又 。 其间, 将 再 次 验证 条 件 ， 
并 判断 1 是 否 小 于 data_json 中 数据 项 的 数量 。 如 果 为 tue， 则 再 次 进入 for 循环 并 执行 其 
中 的 语句 。 该 过 程 重复 执行 ， 直 至 变量 i 值 等 于 employeeCount。 此 时 ，for 循环 的 执行 过 
程 结束 , for 循环 中 的 语句 将 作为 浏览 器 的 Console 窗口 中 的 日 志 了 予以 维护 。 在 运行 HTML 
文件 employees_traversal.html 之 前 ， 应 确保 datajson 文件 和 该 HTML 文件 位 于 同一 目录 。 
随后 ， 将 HTML 文件 加 载 至 浏览 器 中 〈 推 荐 使 用 Chrome、Firefox 或 Safari)， 在 Web 页 
面 上 右 击 并 选择 Inspect Element 选项 (针对 Chrome 或 Safari 浏览 器 ) 进而 打开 Console 
窗口 。 图 2.3 中 显示 了 Console 窗口 中 的 employee 数量 。 


a 
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p (3) [fe}, {a}, {2}] employees traversal.html:7 

Employee number is 10001 employees traversatvhtmtLil1l 

Employee number is 10002 employees traversal,.html:11 

Employee number is 16003 employees traversal.html:11 
> | 


图 2.3 


当 检 索 employee 的 姓名 时 , 可 连接 employee 对 象 中 的 first name 和 last_name 键 , 如 
下 所 示 。 

//To retrieve the full name 

console.1og(`Employee's full Name is ${data json[il].first name} 

${data json[i].last name} ); 

除了 designation 之 外 , 我 们 也 可 采用 相同 的 技术 检索 其 他 键 , 例如 birth_date、gender 
和 hire_date。 快 速 浏览 一 下 JSON 提要 就 会 发 现 与 其 他 键 不 同 ，title 是 对 象 或 对 象 数组 。 
designation 对 象 包含 了 员工 自 入 职 以 来 的 所 有 职务 。 其 中 ， 一 些 员 工 仅 包含 一 个 tile; 而 
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某 些 员工 则 包含 了 多 个 title。 前 者 自身 即 为 一 个 对 象 ， 而 后 者 则 表示 为 一 个 对 象 数组 ， 每 
个 对 象 中 包含 了 一 个 title 对 象 。 当 处 理 此 类 问题 时 ， 需 要 检测 employee 是 否 包 含 了 一 个 
或 多 个 tile。 相 应 地 ， 如 果 员 工 包 含 了 一 个 title， 则 可 直接 输出 数据 ; 否则 , 需要 遍历 title 
数组 ， 并 输出 员工 包含 的 所 有 designation。 对 应 代码 如 下 所 示 。 


for(let i=0;i<employeeCount;i++){ 
console.1og ("Employee number is ", data json[i]l .emp no); 
console.log(‘Employee's full Name is ${data json[i].first name} 
${data json[i] .last name} ); 
if(data json[i] .designation.title instanceof Rrray) { 
const designationCount = data json[i].designation.title.length; 
console.log("data json", data json[i].designation.title); 
let designations = ""; 
for (let j=0;j<designationCount;j++){ 
designations+= `, ${data json[i].designation.title[]]} 
} 
console.1og(`Employee ${data json[i] .emp no} has served as 
${designations}`) 
}elsef{ 
//Employee with only one designation 
let designation = data json[i] .designation.title; 
console.1og(“Employee ${data json[i] .emp no} has served as 
${designation}.) 


其 中 ， 我 们 使 用 了 变量 i 和 employeeCount， 同 时 引入 了 新 的 条 件 ， 以 检测 特定 员工 
的 designation 中 的 title 键 是 否 为 一 个 Array 对 象 。 此 条 件 获 取 循 环 传递 的 值 的 类 型 ， 并 验 
证 它 是 否 是 Array 对 象 的 实例 。 下 列 代码 将 检测 实例 的 类 型 。 


if(data json[i].designation.title instanceof Array) 


一 旦 条 件 满足 ， 则 执行 条 件 内 的 语句 。 在 成 功 条 件 中 ， 我 们 声明 了 3 个 变量 。 其 中 
第 一 个 变量 为 j， 并 针对 遍历 title 的 第 二 个 for 循环 加 载 一 个 计数 器 ， 第 二 个 变量 
designationCount, EE title 数组 中 的 有 效 数据 项 的 数量 ， 最 后 一 个 变量 则 是 
designations， 该 变量 初始 化 为 空 字符 串 ， 并 加 载 员工 拥有 的 全 部 tile， 另外， 该 变量 将 存 
储 一 个 title 列表 (逗号 “,” 分 隔 的 字符 帅 )。 对 应 代码 如 下 所 示 。 


for (let j=0;j<designationCount;j++){ 


designations+= `, ${data json[i]l.designation.title[]]} :> 


守 
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在 for 循环 中 ， 将 创建 员工 的 职务 (title) 信息 ， 每 次 添加 一 个 title 至 designations 变 
量 中 。 一 旦 title 被 成 功 地 添加 至 designations 变量 中 ， 则 j 值 加 1 且 循 环 操 作 持续 进行 ， 
直至 全 部 title 字符 串 均 被 遍历 ; 如果 title 键 不 是 一 个 数组 ， 则 执行 流程 进入 else 代码 块 ， 
并 执行 该 块 中 的 语句 。 由 于 对 应 员工 仅 包含 一 个 title, 因而 数据 将 直接 输出 至 Console 中 。 

的 尽管 可 采用 for 循环 ， 但 新 的 ECMAScript 字符 串 修饰 符 可 以 将 数组 连接 到 默认 
以 过 号 (,) 分 隔 的 字符 串 中 ， 如 下 所 示 。 


console.1og(`$fdata json[i]l.designation.title} ) 

上 述 操 作 类 似 于 之 前 employee 代码 逻辑 中 的 else。“`${}` ”可 直接 用 于 将 数组 转换 
为 一 个 字符 串 。 但 需要 注意 的 是 ， 当 采用 逗号 之 外 的 连接 运算 符 进行 操作 时 ,可 能 会 使 用 
到 for 循环 。 

至 此 ,相信 读者 已 对 如 何 访问 对 象 、 执 行 复杂 操作 以 析 取 数据 有 所 了 解 ， 接 下 来 将 讨 
论 如 何 修改 JSON 数据 。 


2.4 修改 JSON 


源 自 JSON 提要 的 JSON 通常 为 只 读数 据 。 因 此 ，JOSN 提要 无 法 修改 来 自 未 经 验证 
的 数据 源 中 的 数据 ,但 许多 时 候 , 我 们 需要 从 外 部 数据 提要 中 获取 数据 ， 并 根据 需要 修改 
:中 的 内 容 。 例如， 一 家 公司 采用 数据 供应 商 提供 的 数据 提要 ,但 实际 内 容 超 出 了 公司 的 
前 需求 。 此 时 , 我 们 仅 须 析 取 部 分 内 容 即 可 , 并 在 此 基础 上 执行 相关 操作 对 其 进行 修改 ， 
f 于 随后 复 用 新 的 JSON 对 象 。 下 面 考查 employee JSON 提要 示例 。 
役 设 公司 名 称 在 不 同时 期 发 生 了 变化 , 我 们 需要 通过 公司 名 称 并 根据 入 职 时 间 对 员工 
进行 分 组 。 具 体 来 说 ，2006 年 之 前 入 职 的 员工 将 被 分 组 至 Companyl 中 ; 2006 年 入 职 的 
员工 将 被 分 组 至 Company2 中 。 当 体现 这 一 变化 时 ， 可 向 JSON 提要 中 添加 company 键 ， 
如 下 所 示 。 
<!DOCTYPE html> 
<html> 
<head> 
<title>Modify JSON based on joining year</title> 
<script type="text/javascript" src="data.js"></script> 
<script type="text/javascript"> 
for(let i in data json){ 
let data = data json[il]; 


//retrieve the year 
const join year = parseInt (data.hire date.slice(0,4)); 


半 些 粒 
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if(join year> 2006){ 
data.company = "Companyl™"; 
}else{ 
data.company = "Company2"; 
} 


let message = “Employee ${data.emp no} 
joined in the year ${join year} 
belongs to ${data.company} > 


console.1log (message); 
} 
</script> 
</head> 
<body> 
<h2>Modifying JSON based on joining year</h2> 
<p>This is a test program to learn how JSON is imported 
from a feed could be locally modified.</p> 
</p> 
</body> 
</html> 


在 modify_employee.html 文件 中 ,将 遍历 员工 对 象 数 组 并 获取 员工 的 入 职 年 份 。 随 后 
将 字符 串 转 换 为 一 个 整数 值 ， 并 用 于 公司 的 年 份 值 。 下 列 代码 将 解析 后 的 年 份 值 赋予 
join_year 变量 中 。 

let data = data json[i]; 


//retrieve the year 
const join year = parseInt (data.hire date.slice(0,4)); 


下 列 代 码 将 检测 员工 的 入 职 年 份 是 否 在 2006 年 之 前 。 若 是 ， 可 将 company 属性 添加 
至 employee 对 象 中 ， 并 赋予 Companyl 值 ; 否则 赋予 Company2 值 ， 如 下 所 示 。 
if(join year> 2006){ 
data.company = "Companyl"; 
}elsef 
data.company = "Company2"; 
} 
在 为 新 添加 的 属性 company 赋值 后 ， 可 构建 一 条 通用 消息 ， 该 消息 将 应 用 于 所 有 员 
[， 而 不 管 他 们 属于 哪个 公司 。 这 里 ， 我 们 获取 了 生成 该 消息 所 需 的 员工 号 、 员 工 的 入 职 
FE 份 和 格式 名 称 ， 如 下 所 示 。 
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let message = “Employee ${data.emp no} 
joined in the year ${join year} 
belongs to ${data.company}; 
console.1og (message); 


当 在 浏览 器 中 运行 modify_employee.html 时 ， 将 执行 修改 后 的 脚本 ， 输 出 结果 将 显示 
于 Console 中 ， 如 图 2.4 所 示 。 
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Employee 10001 modify employee.html:22 
joined in the year 2010 
belongs to Company1 

Employee 10002 modify employee.html:22 
joined in the year 2005 
belongs to Company2 

Employee 10003 modify employee.html:22 
joined in the year 2006 
belongs to Company2 


图 2.4 
2.5 本 章 小 结 


本 章 讨论 了 处 理 静态 JSON 提要 的 核心 概念 。 首 先是 将 外 部 JSON 对 象 导 入 HTML 
文件 中 、 遍 历 复杂 的 对 象 数组 并 析 取 所 需 的 数据 。 其 间 ， 我 们 使 用 了 while 循环 和 for 循 
环 遍历 数组 , 并 通过 相关 条 件 定位 搜索 结果 。 随后, 本 章 还 对 已 有 的 JSON 提要 进行 修改 ， 
并 加 入 了 新 的 属性 。 至 此 ， 相 信 读 者 已 经 掌握 了 如 何 从 静态 文件 中 访问 JSON， 接 下 来 将 
执行 异步 调用 并 通过 HTTP 获取 处 于 活动 状态 下 的 JSON。 
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当前 ，JSON 已 被 视 作 最 为 流行 的 数据 交换 格式 之 一 。 在 第 2 章 中 ， 我 们 曾 考查 了 一 
个 示例 ， 并 将 JSON 提要 作为 数据 存储 。 本 章 将 讨论 动态 数据 ， 主 要 涉及 以 下 主题 。 


口 Web 应 用 程序 的 操作 过 程 。 

口 同步 和 异步 请 求 。 

口 针对 AJAX 请 求 设置 需求 条 件 。 

口 托管 JSON。 

口 采用 回调 、Promise 和 生成 器 处 理 AJAX 响应 。 
口 解析 JSON 响应 。 


HIML、 客 户 端 JavaScript 和 CSS 分 别提 供 了 结构 、 行 为 和 表现 方面 的 内 容 ， 而 动态 
Web 开发 则 与 客户 端 和 服务 器 间 的 数据 传输 相关 ， 我 们 将 采用 Web 服务 器 、 数 据 库 和 服 
务 器 端 编程 语言 等 程序 获取 和 存储 动态 数据 。 下 面 将 考查 数据 操作 背后 的 处 理 过 程 。 


3.1 基本 的 Web 操作 


当 用 户 打开 Web 浏览 器 并 输入 URL 时 ， 例 如 http://www.packtpub.com/， 将 会 产生 以 
下 活动 序列 。 

(1) 浏览 器 请 求 互联 网 服务 提供 商 (Intermet Service Provider，ISP) 通过 提供 域名 来 
执行 他 地 址 的 反 向 查找 。 

(2) 一 旦 获取 人 P 地 址 ， 请 求 将 被 转发 至 拥有 该 卫 地 址 的 机 器 上 。 此 时 ， 某 个 Web 服 
务 器 正在 等 待 使 用 该 请 求 。 这 里 ，Web 服务 器 可 能 是 Apache、IIS、Tomcat 或 Nginx 之 一 。 

(3) Web 服务 器 接收 请 求 并 查看 HTTP 请 求 中 的 数据 头 。 此 类 数据 头 将 传递 与 Web 
服务 器 请 求 相关 的 信息 。 

(4) 一 旦 Web 服务 器 解析 了 此 类 数据 头 ， 将 把 请 求 路 由 至 服务 器 端的 应 用 程序 中 
以 处 理 此 类 请 求 。 对 应 的 应 用 程序 可 能 采用 PHP、C#WASPNET、Java/JSP 等 语言 编写 。 

(5) 服务 器 端 程序 接收 、 解 析 请 求 ， 并 执行 完成 请 求 所 需 的 业务 逻辑 。 这 一 类 HITP 
请 求 的 相关 示例 包括 加 载 一 个 Web 页 面 和 单 击 网 站 上 的 Contact us 链接 。 当 然 , 也 存在 一 
些 较为 复杂 的 HTTP 请 求 , 其 间 , 数据 需要 被 验证 、 清洗 并 从 数据 存储 应 用 程序 中 被 检索 ， 
例如 数据 库 、 文 件 服务 器 或 缓存 服务 器 。 

HTTP 请 求 可 通过 两 种 方式 生成 ， 即 同步 请 求 和 异步 请 求 。 
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同步 请 求 是 一 种 阻塞 请 求 ,， 其间， 所 有 事物 都 必须 以 一 种 有 序 的 方式 ,一 个 接 一 个 地 
完成 。 也 就 是 说 ， 下 一 个 步骤 须 等 到 上 一 个 步骤 完成 后 方 可 执行 。 假 设 加 载 页 面 时 ， 页 面 
上 存在 4 个 独立 组 件 。 如 果菜 个 组 件 在 执行 期 间 占用 较 长 的 时 间 ， 那么 ,页 面 中 的 其 他 部 
分 将 处 于 等 待 状态 ， 直 至 该 组 件 执行 完毕 ; 如果 执行 过 程 中 出 现 故 障 ， 页面 加 载 过 程 也 随 
之 失败 。 另 一 个 例子 是 Web 页 面 上 的 投票 和 评分 组 件 。 在 用 户 投票 、 评 级 后 ， 如 果 采 用 
了 同步 请 求 机 制 ， 那 么 这 两 个 请 求 将 被 逐一 发 送 。 

在 上 述 投 票 操作 中 ,读者 不 要 将 其 与 HTTP 长 轮 询 技术 混 清 ,二 者 是 完全 不 同 的 
机 制 。 对 此 ， 读 者 可 访问 https://en.wikipedia.org/wiki/Push technology#Long polling 以 了 
解 更 多 信息 。 

当 处 理 同步 请 求 问题 时 ， 开 发 社区 在 异步 HTTP 请 求 领域 中 逐渐 取得 了 进展 。 其 中 ， 
Microsoft 首先 推出 了 IFrame 标签 ， 进 而 使 用 IFrame 并 通过 正 浏览 器 异步 加 载 内 容 。 在 
IFrame 之 后 则 是 XML HTTP ActiveX 控件 。 后 来 ， 所 有 浏览 器 都 在 新 的 XMLHttpRequest 
JavaScript 对 象 (XMLHttpRequestAPI 中 的 一 部 分 内 容 ) 下 采用 这 种 控件 .XMLHttpRequest 
API 用 于 向 Web 服务 器 生成 HTTP (或 HTTPS) 调用 ， 并 可 实现 同步 和 异步 调用 。 相 应 
地 ， 异 步 请 求 允许 开发 人 员 将 Web 页 面 划分 为 多 个 彼此 无 关 的 组 件 ， 并 根据 需要 发 送 数 
据 ， 从 而 节省 了 大 量 的 内 存 空 间 。 

Jesse James Garrett 将 这 一 现象 称 作 AJAX 〈 即 异步 JavaScript 和 XML)，Web 请 求 通 
过 JavaScript 所 生成 ， 数 据 交 换 最 初 产 生 于 XML 中 。AJAX 中 的 X 当初 被 视 为 XML， 但 
当今 它 可 以 是 任何 数据 交换 格式 ， 例 如 XML、JSON、 文 本 文件 ， 甚 至 是 HTML。 用 于 数 
据 传 输 的 数据 格式 须 呈现 于 MIME 类 型 数据 头 中 。 在 第 1 章 中 ， 我 们 特意 强调 了 JSON 
成 为 首选 数据 交换 格式 的 原因 。 接 下 来 将 利用 JSON 数据 生成 第 一 个 AJAX 调用 。 

从 本 质 上 讲 ，Web 开发 人 员 可 以 使 用 AJAX 原则 按 需 获取 数据 ， 从 而 使 网 站 更 具 响 
应 性 和 交互 性 。 当 然 ， 理 解 这 种 需求 的 根源 是 非常 重要 的 。 相 应 地 ， 这 种 数据 需求 的 触发 
器 通常 是 发 生 在 Web 页 面 上 的 事件 。 这 里 ， 事 件 可 描述 为 对 所 执行 动作 的 反应 。 例 如 ， 
摇 铃 这 一 动作 将 在 铃 销 内 生成 振动 ， 进 而 产生 声音 。 因 此 ， 可 将 摇 铃 这 一 动作 则 视 为 当前 
事件 ， 而 产生 的 声音 则 被 视 为 对 事件 的 响应 。 一 个 Web 页 面 上 可 存在 多 个 事件 ， 例 如 单 
击 按钮 、 提 交 表 单 、 鼠 标 指针 悬 停 于 某 个 链接 上 、 从 下 拉 菜 单 中 选取 某 个 选项 ， 这 都 是 十 
分 常见 的 事件 。 当 出 现 此 类 事件 时 ， 我 们 必须 找到 一 种 以 编程 方式 处 理 它们 的 方法 。 


32 ”AJAX 需求 


AJAX 是 浏览 器 (客户 机 ) 和 活动 Web 服务 器 之 间 通 过 HTTP (或 HITPS) 的 异步 
双向 通信 。 其 中 ， 可 通过 本 地 方式 并 使 用 Apache、IIS 或 nodejjs 这 一 类 工具 运行 活动 服 
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务 器 。 这 里 ， 我 们 将 选择 nodejs 作为 主 服 务 器 平台 。 
node.js 服务 器 的 搭建 过 程 涉及 以 下 步骤 。 
(1) 访问 https:/nodejs.org/en/ 并 下 载 安 装 文件 。 用 户 可 选择 LTS (long-term support) 可 
执行 文件 ， 以 获取 nodejs 社区 的 长 期 支持 。 
(2) 安装 过 程 为 简单 的 一 键 式 处 理 ， 用 户 遵循 相关 步骤 即 可 。 如 果 用 户 打算 从 终端 进 
行 安装 ， 则 可 单 击 链接 https://nodejs.org/en/download/package-manager/。 
(3) 安装 完毕 后 ， 即 可 设置 并 编写 第 一 个 服务 器 端 程序 ， 进 而 生成 /托管 一 个 JSON 
提要 。 在 终端 中 运行 以 下 命令 将 在 当前 目录 下 生成 一 个 文件 ， 如 下 所 示 。 
$ mkdir test-node-app 
$ cd test-node-app 
$ npm init 
npm init 需要 在 设置 应 用 程序 之 前 完成 某 些 附 加 信息 ， 该 命令 对 于 创建 packagejson 
分 重要 ， 同 时 担任 了 所 有 安装 模块 和 数据 包 的 注册 器 。 此 外 ， 它 还 在 管理 应 用 程序 时 扮 
演 了 主要 的 角色 。 读 者 可 访问 https://docs.npmjs.com/cli/init 以 了 解 更 多 信息 。 
(4) 生成 名 为 appjjs 的 应 用 程序 ， 该 文件 包含 了 构建 服务 器 的 代码 ， 如 下 所 示 。 
const http = require('http'); 
const port = 3300; 
http.createServer((req, res) => { 
res.writeHead(200, { 
"Content-Type": "text/plain" 
Ds 
res.write ("Hello Readers!"); 
res.end(); 


}) .listen (port); 
console.log( ‘Node Server is running on port: ${port}.) 


(5) 运行 下 列 命令 。 


node app.js 

如 果 一 切 运 转正 常 ， 将 得 到 下 列 输 出 结果 。 

Node Server is running on port: 3300 

当 执 行 服务 器 请 求 操作 时 , 须 打开 操 作 系 统 中 的 浏览 器 , 并 访问 http://localhost:3300。 
随后 ， 在 浏览 器 文档 主体 中 将 得 到 下 列 输 出 结果 。 

Hello Readers! 


一 旦 接收 到 这 条 消息 ， 即 可 确信 Web 服务 器 已 经 启动 并 处 于 运行 状态 。 
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下 面 将 逐步 分 析 上 述 脚 本 的 工作 方式 。 

(1) 第 一 行 代码 包含 节点 API 中 已 存在 的 HTTP 本 地 模块 ; 该 模块 提供 了 构建 HTTP 
服务 器 所 需 的 全 部 功能 。 

(2) 针对 所 提供 的 各 项 功能 , HTTP 实例 包含 了 多 种 方法 。 此 处 我 们 使 用 了 createServer0 
方法 。 当 调用 该 方法 时 ， 将 创建 一 个 服务 器 并 返回 一 个 HTTP 服务 器 实例 。 

(3) 可 作为 参数 向 createServer() 方 法 传递 一 个 回调 函数 ， 这 样 每 当 服务 器 接收 到 一 个 
HTTP 请 求 时 ， 该 方法 就 会 被 调用 并 向 客户 端 发 送 所 需 的 响应 。 虽 然 作为 参数 传递 的 回调 
函数 是 可 选 的 ， 但 对 接收 到 的 请 求 执行 各 种 操作 并 返回 相应 结果 则 是 十 分 重要 的 。 

(4) 最 后 ， 最 重要 也 是 强制 性 的 步骤 是 监听 指定 端口 。 这 可 以 通过 调用 HTTP 服务 器 
实例 提供 的 listen() 方 法 来 实现 。 

(5) 至 此 ，HTTP 服务 器 已 准备 就 绪 ， 但 会 采用 与 "Hello Readers! "不 同 的 字符 串 数 据 
格式 响应 客户 端 ， 因 而 需要 转换 为 JSON。 

Web 应 用 程序 可 构建 于 任何 语言 之 上 ; 同时 ， 在 服务 器 端 堆栈 所 支持 的 Web 应 用 程 
序 之 间 ，JSON 可 用 作 相 应 的 数据 交换 语言 。 接 下 来 将 讨论 服务 器 端 编程 语言 ， 并 在 Web 
应 用 程序 对 其 予以 实现 。 


3.3 托管 JSON 


本 节 将 创建 一 个 节点 脚本 , 该 脚本 允许 我 们 在 成 功 请 求 时 向 用 户 发 送 JSON 反馈 。 下 
列 代码 显示 了 实现 这 一 任务 的 appjjs 文件 。 


const http = require('http'); 
const port = 3300; 
http.createServer((req, res) => { 
res.writeHead(200, { 
"Content-Type": "application/json" 
DD); 
res.write (JSON.stringify({ 
greet: "Hello Readers!" 
Ds 
res.end(); 
}) .listen (port); 
console.log(‘Node Server is running on port: ${port}.) 


上 述 代 码 突出 显示 了 发 送 JSON 数据 时 所 做 的 修改 内 容 。 该 脚本 由 JSON 对 象 构 成 ， 
其 中 ，greet 作为 键 ，Hello Readers! 表 示 为 值 。 由 于 所 提供 的 响应 结果 总 是 以 字符 串 或 组 
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冲 区 格式 呈现 ， 因 而 对 象 首 先 被 字符 串 化 。 除 此 之 外 ， 还 需要 将 内 容 类 型 提供 为 
application/json。Content-Type 将 在 响应 头 中 进行 设置 ， 以 便 浏 览 器 可 以 识别 所 提 到 的 响 
应 类 型 。 

下 面 在 student 数据 的 基础 上 进一步 丰富 JSON 内 容 。 下 列 代 码 创 建 了 一 个 名 为 
student data.json 的 JSON 文件 。 


//student data.json 
| 
"studentid": 101, 
"firstname": "John", 
"lastname": "Doe", 
"classes": ["Business Research", "Economics", "Finance" 
1 到 
{ 
"studentid": 102, 
"firstname": "Jane", 
"lastname": "Dane", 
"classes": ["Marketing", "Economics", "Finance"] 


}] 
服务 器 脚本 文件 中 的 student_data.json 文件 如 下 所 示 。 


const http = require('http'); 
const port = 3300; 
const studentsData = require('./student data.json'); 
http.createServer((req, res) => { 
res.writeHead(200, { 
"Content-Type": "application/json" 
1); 
res.write (JSON.stringify (studentsData) ) ; 
res.end(); 
}) .listen (port); 
console.1og(`Node Server is running on port: ${port}*) 


上 述 节 点 脚本 生成 了 一 个 studentsData 数组 , 同时 针对 该 数组 生成 了 一 个 JSON 提要 。 
studentsData 数组 中 包含 了 基本 的 学 生 信息 ， 例 如 名 字 、 姓 氏 、 学 生 ZD 以 及 学 生 所 注册 的 
班级 。 

接 下 来 通过 节点 Web 服务 器 访问 该 文件 。 在 访问 http:Wlocalhost:3300 后 将 得 到 如 
图 3.1 所 示 的 结果 。 
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©® [locahost:3300 


Sa CGC © localhost:3300 


[{"etudentid":101, "firstname" : "John","lastnane":"Doe","classes" :[ "Business 
Research","Economics", "Finance"]}, 
{"studentid":102,"firstname":"Jane","lastname":"Dane",'"classes" 
["Marketing","Economics","Finance"]}] 


图 3.1 


当 通 过 节点 Web 服务 器 运行 该 文件 时 ， 服 务 器 将 接收 请 求 信息 并 对 其 进行 处 理 ， 随 
后 输出 传递 学 生 数据 的 JSON 提要 。 


3.4 第 一 个 AJAX 调用 


前 述 内 容 创建 了 一 个 JSON 数据 提要 ， 本 节 将 生成 第 一 个 AJAX 调用 。 对 此 ， 我们 将 
考查 不 同 的 方案 , 这 项 技术 及 其 使 用 方式 已 经 发 展 了 一 段 时 间 ， 旨 在 提高 性 能 。 第 一 种 方 
案 将 采用 基本 的 JavaScript 方法 ， 以 便 理解 AJAX 调用 背后 的 流程 ， 随 后 我 们 将 使 用 一 些 
较为 流行 的 库 , 在 稍 作 调 整 后 生成 相同 的 AJAX 调用 。 在 第 一 种 方案 中 , 将 通过 下 列 模 板 
和 JavaScript 创建 basic.html 文件 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>First AJAX script</title> 
<script type="text/javascript" src="basic.js"></script> 
</head> 
<body> 
<h2>Include external Javascript to make an ajax call</h2> 
<p>This is a test program to make our first AJAX call using 
javascript</p> 
</body> 
</html> 


此 处 将 从 加 载 外 部 JavaScript 文件 的 basic.html 文件 开始 , 此 类 JavaScript 文件 将 执行 
AJAX 调用 以 获取 students JSON 提要 。 
考查 下 列 basicjs 文件 。 
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const request = new XMLHttpRequest () 

request .open('GET', ‘'http://localhost:3300'); 

request .onreadystatechange = function(){ 
if((request.status==200) && (request.readyState==4) ) { 

console.1og (request.responseText) 

} 

1 

request.send(); 

这 也 是 对 Web 服务 器 进行 AJAX 调用 的 原始 方式 。 下 面 将 上 述 脚本 分 为 几 部 分 内 容 

并 逐一 进行 讨论 。 
const request = new XMLHttpRequest (); 


上 述 代码 片段 生成 了 一 个 XMLHttpRequest 对 象 实例 。XMLHttpRequest 对 象 可 向 服 
务 器 进行 异步 调用 ， 并 将 页 面 中 的 内 容 视 为 独立 的 组 件 ， 其 中 包含 了 readystate、response 
和 responseText 等 有 用 的 属性 ， 以 及 open、onuploadprogress、onreadystatechange 和 send 
等 方法 。 下 面 查看 如 何 使 用 生成 的 request 对 象 打开 一 个 AJAX 请 求 ， 如 下 所 示 。 
request .open('GET', 'http://localhost:3300°'); 


默认 状态 下 ，XMLHttpRequest 将 打开 一 个 异步 请 求 。 此 处 ,我们 将 指定 获取 提要 所 
需 的 对 应 方法 。 鉴 于 当前 不 会 传递 任何 数据 ， 因 而 可 选择 HTTP GET 方法 ， 并 将 数据 发 
送 至 Web 服务 器 上 。 当 在 异步 请 求 上 进行 操作 时 ， 不 应 设置 阻塞 脚本 ， 可 通过 设置 回调 
对 此 加 以 处 理 。 这 里 ,回调 是 指 一 组 等 待 响应 的 脚本 ， 并 在 接收 响应 结果 时 被 触发 。 这 种 
行为 有 助 于 非 阻塞 代码 。 

下 面 设置 一 个 回调 ， 并 将 其 赋予 onreadystatechange 方法 中 ， 如 下 所 示 。 

request .onreadystatechange = function(){ 

if((request.status==200) && (request.readystate==4)){ 
console.log (request .responseText); 
} 

} 

占 位 符 方法 onreadystatechange 在 请 求 对 象 中 查找 一 个 名 为 readyState 的 属性 ; 当 
readyState 值 发 生变 化 时 ， 即 会 触发 onreadystatechange 事件 。readyState 属性 负责 跟踪 
XMLHttpRequest 的 进程 。 在 图 3.1 中 ， 可 以 看 到 回调 包含 了 一 个 条 件 语 句 ， 用 于 验证 
readyState 的 值 为 4。 这 意味 着 ， 服 务 器 已 接收 到 客户 端 生成 的 XMLHttpRequest， 同 时 响 
应 已 经 就 绪 。 

表 3.1 显示 了 readyState 的 有 效 值 。 


。32。 JavaScript 与 JSON 从 入 门 到 精通 (第 2 版) 
表 3:1 

readyState 描 述 
0 请 求 尚未 被 初始 化 
1 服务 器 连接 已 建立 
2 服务 器 已 接收 到 请 求 
3 服务 器 正在 处 理 请 求 
4 请 求 已 被 处 理 完毕 ， 响 应 已 就 绪 


在 之 前 的 代码 中 ， 我 们 曾 查询 过 一 个 属性 status， 这 表示 为 从 服务 器 返回 的 HITP 状 


态 代 码 。 具 体 来 说 ， 


状态 代码 200 表示 一 个 成 功 的 事务 ; 而 状态 代码 400 则 表示 一 个 糟糕 


的 请 求 ，404 表示 没有 找到 页 面 。 其 他 一 些 较为 常见 的 状态 码 还 包括 401 (表示 用 户 请 求 
了 一 个 仅 针对 授权 用 户 的 页 面 ) 和 500《〈 表 示 内 部 服务 错误 )。 
前 述 操作 曾 创 建 了 一 个 XMLHttpRequest 对 象 并 打开 了 连接 ; 此外， 还 添加 了 一 个 世 


调 ， 并 在 请 求 成 功 后 执行 某 个 事件 。 需 要 注意 


请 求 所 涉及 的 基础 


request.send ( 


的 是 ， 该 请 求 尚未 生成 ， 我 们 只 是 完成 了 该 
- 作 。 随 后 ， 将 使 用 send() 方 法 将 请 求 发 送 至 服务 器 ， 如 下 所 示 。 
) 7 


在 onreadystateChange 回调 中 ， 我 们 将 Web 服务 器 发 送 的 响应 输出 至 控制 台 窗口 中 。 


当 首 次 运行 代 在 


3 时 ， 浏 览 器 的 Console 选项 卡 将 会 显示 如 图 3.2 所 示 的 内 容 。 


Include external Javascript to make an ajax call 


‘This is a test program to make our first AJAX call using javascript 


RR 中 Elements 


© top 


Console Sources Network Performance Memory » 


村 Fitter Default levels Y 


@ Failed to load http://localhost:3300/: No ‘Access-Control-Allow-Origin' header is basic.html:1 
present on the requested resource. Origin ‘null’ is therefore not allowed access, 


> 
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错误 的 原因 在 于 ， 加 载 的 文档 在 浏览 器 的 URL 定位 器 中 包含 不 同 的 域名 ， 而 AJAX 
则 请 求 一 个 不 同 的 URL， 这 源 自 浏览 器 的 跨 域 资源 共享 (Cross-Origin Resource Sharing， 
CORS ) 策略 。 关 于 CORS, 读者 可 访问 https://developer.mozilla.org/en-US/docs/Web/HTTP/ 
CORS 以 了 解 更 多 内 容 。 

针对 这 一 问题 ， 我 们 需要 在 服务 器 端 对 其 加 以 处 理 ， 以 提供 CORS 方面 的 支持 。 对 
此 , 须 在 writeHead0 方 法 或 res 响应 对 象 中 添加 Access-Control-Allow-Origin。 对 应 值 为 “*”， 
表示 访问 被 授予 任何 域 或 请 求 ， 如 下 所 示 。 

res.writeHead(200, { 

"Content-Type": "application/json", 


"Access-Control-Allow-Origin": "*", 
Mi 


这 里 ， 应 确保 设置 内 容 不 同 于 生产 环境 。 在 生产 环境 中 ， 作 为 示例 ， 域 名 可 指定 为 下 
列 内 容 。 

"Access-Control-Allow-Origin":"www.differentdomain.com" 

此 时 ， 响 应 的 输出 结果 如 图 3.3 所 示 。 


©@®@ [Dy FirstAJAX script 


> CG © file:///Users/bruno/Documents/projects/is/book/ison%20essential/codes/chapter%20... 窒 


Include external Javascript to make an ajax call 


This is a test program to make our first AJAX call using javascript 


[RI Eements Consoe Sources Network Performance Memory Application » 


© top v | Fikter Defauit levels Y 
[{"studentid":101,"firstnane":"John", "lastname":"D: 
Research","Economics", "Fina bb, 

{"studen 102, "firstname' ne", "lastname":"Dane", "classes"; 
["Marketing", "Economics", "Finance"]}] 


> | 


oe", "classes": ["Business basic.is:6 


图 33 


一 种 确认 AJAX 请 求 的 方式 是 ， 查 看 浏览 器 的 Network 选项 卡 ( 位 于 Console 选项 卡 
附近 )， 其 中 对 localhost:3300 地 址 进行 异步 调用 ， 返 回 的 响应 包含 了 200 OK 的 HITP 状 


一 
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态 码 。 由 于 HTTP 状态 码 为 200， 这 表明 回调 成 功 执行 ， 同 时 输出 students JSON 提要 。 


随 着 强大 的 JavaScript 库 (例如 jQuery、Scriptaculous、Dojo 和 ExtJS) 的 出 现 , AJAX 


请 求 已 较 少 出 现 。 需 要 注意 的 是 ， 库 仍然 会 在 底层 使 用 这 一 过 程 。 因 此 ， 了 解 


XMLHttpRequest 对 象 的 工作 方式 非常 重要 。jQuery 是 一 个 非常 流行 的 JavaScript 库 ， 并 
有 一 个 不 断 壮大 的 社区 。 由 于 jQuery 库 是 在 MIT 许可 下 发 布 的 ， 所 以 用 户 可 以 免费 使 


这 个 库 。 


jQuery 是 一 个 非常 简单 、 功 能 强大 的 库 ， 具 有 出 色 的 文档 和 强大 的 用 户 社区 ， 这 使 得 


发 人 员 的 工作 非常 简单 。 下 列 代码 采用 jQuery 实现 了 Hello World 程序 。 


<!DOCTYPE html> 


<html> 
<head> 


<title>Hello world using jQuery</title> 
<!-- Go to https://code.jquery.com/ for more details --> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script> 
<script> 
$ (document) .ready(() => { 

console.log("Hello world!"); 


}) 


</script> 


</head> 
<body> 


<h2>Hello world using jquery</h2> 
<p>This is a Hello world program using jquery</p> 
</body> 


</html> 


上 述 代 码 向 HIML 文件 中 导入 了 jQuery 库 。 在 第 二 组 <script> 标 签 中 ,我 们 使 用 了 特 
定 的 字符 $ 或 jQuery。 与 面向 对 象 程序 设计 中 的 命名 空间 相似 ，jQuery 功能 的 名 称 空间 默 
认为 特殊 字符 $。 在 $ 之 后 ， 这 里 调用 了 document 对 象 并 检测 是 否 被 加 载 至 页 面 上 ， 随 后 
则 分 配 了 一 个 回调 函数 ， 该 函数 将 在 文档 加 载 事件 完毕 后 被 触发 。 此 处 ，document 表示 


为 一 个 docume 


nt 对 象 , 其 中 加 载 了 HTML 元 素 结构 。 当 前 程序 的 输出 结果 为 Hello World! 


村 串 ， 并 输出 至 控制 台 窗 口中 。 


前 述 内 容 i 
， 即 处 理 用 
先进 的 方法 。 


十 论 了 客户 端 请 求 的 较为 传统 的 JSON 处 理 方式 , 并 简要 地 介绍 了 回调 这 一 
有 务 器 请 求 的 异步 方式 之 一 。 接 下 来 将 进一步 深入 讨论 回调 ， 同 时 介绍 一 些 
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3.4.1 传统 的 回调 


回调 是 一 个 简单 的 匿名 函数 ， 它 作为 参数 被 传递 ,并 在 需要 时 在 另 一 个 函数 的 作用 域 
内 被 调用 。 考 查 下 列 代码 片段 。 


function greetAll (callback){ 
console.log("Hello Readers!"); 
console.1og(`Greeting from the ${callback()}.) 
} 
greetAll (()=>{ 
return "Author"; 
I 


上 述 代 码 片 段 中 设置 了 一 个 greetAll0 函 数 , 其 中 包含 了 一 个 简单 的 callback 参数 。 当 
调用 greetAll0 函 数 时 ， 将 作为 参数 传递 一 个 匿名 函数 。 此 后 ，greetAll0 函 数 在 编程 上 下 
文中 被 执行 ， 该 上 下 文 将 执行 以 下 逐 项 操作 。 

(1) 首先 输出 Hello Readers!。 

(2) 当 从 左 至 右 执行 第 二 个 输出 项 时 ， 将 依次 调用 名 为 callback 的 参数 来 执行 操作 ， 
因而 将 输出 Greeting from the Author。 

注意 ， 回 调 可 在 greetAll0 函 数 的 全 部 操作 执行 完毕 后 被 调用 ;， 或者， 回调 也 可 在 其 
他 操作 之 前 被 调用 ,这 取决 于 所 需 的 相关 功能 。 这 一 类 机 制 可 用 于 处 理 异 步 事 件 。 考查 地 
址 localhost:3300 产生 的 请 求 ， 这 是 一 个 利用 浏览 器 中 AJAX 方法 所 生成 的 异步 请 求 。 在 
此 基础 上 ， 下 面 采用 jQuery AJAX GET 方法 对 AJAX 调用 应 用 回调 ， 如 下 所 示 。 

<!--jquery-ajax.html——> 

<!DOCTYPE html> 

<html> 

<head> 

<title>Ajax using jquery</title> 
<!-- Go to https://code.jquery.com/ for more details --> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script> 
<script> 
$ (document) .ready(() => { 
$('#getFeed') .click(()=>{ 
$.getJsSON('http://localhost:3300/"', (jsonData)=>{ 
console.1o0g("jsonData", jsonData); 
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</script> 
</head> 
<body> 
<h2>AJAX using jquery</h2> 
<input type="button" id="getFeed" value="Get Feed" /> 
</body> 
</html> 


在 上 述 <script> 标 签 中 ， 我 们 向 节点 服务 器 请 求 获取 学 生 数据 。 在 当前 示例 中 ， 我 们 
将 回调 作为 第 二 个 参数 传递 给 jQuery 的 $.geUSON() 方 法 调用 ， 该 回调 处 理 在 请 求 完成 时 
接收 的 数据 。 类 似 地 , 如 果 仔 细 观 察 , 还 会 发 现 前 面 的 代码 片段 中 还 使 用 了 一 种 回调 机 制 ， 
即 jQuery 的 click0 方 法 ， 它 接受 一 个 回调 函数 ， 该 回调 函数 提供 了 一 种 机 制 ， 用 于 在 浏 
览 器 中 单 击 事件 发 生 时 编写 代码 。 

至 此 ,相信 读者 已 经 了 解 了 回调 的 整体 概念 及 其 被 应 用 原因 。 接 下 来 将 讨论 一 些 较为 
高 级 的 异步 数据 处 理 机 制 。 


3.4.2 利用 Promise 处 理 异 步 操 作 


虽然 回调 应 用 广泛 , 通常 也 是 执行 异步 操作 的 最 佳 方式 , 但 它 仍然 无 法 满足 某 些 代码 
模式 的 标准 要 求 ， 如 下 所 示 。 
口 “如果 在 回调 中 返回 数据 ， 并 传递 至 某 个 库 〈 如 jQuery)， 那 么 将 很 难 了 解 到 回调 
中 的 返回 数据 在 库 代 码 中 的 处 理 方式 。 考 查 下 列 代码 。 
$.getJSON('http://localhost:3300/', (jsonData)=>{ 
console.10g("jsonData", jsonData); 


return jsonData; 
}) 


其 中 ， 返 回 语句 的 去 向 尚 不 明晰 。 
口 另 一 个 需要 处 理 的 问题 是 错误 异常 。 考 查 下 列 代码 。 
$.getJSON('http://localhost:3300/', (jsonData)=>{ 
console.10g("jsonData", jsonData); 
throws "someError 500"7 
[| 
如 果 出 现 意外 错误 或 显 式 地 抛 出 异常 ， 则 无 法 在 回调 级 别 上 处 理 该 错误 。 尽 管 存在 
try{fjcatch(e) 弛 块 可 对 此 予以 处 理 ， 但 不 建议 每 次 在 回调 中 编写 代码 时 对 其 加 以 使 用 。 
口 最 后 一 个 问题 则 是 代码 的 可 读 性 。 连续 使 用 过 多 的 回调 会 导致 “回调 地 狱 ” 问题 。 
对 此 ， 读 者 可 访问 http://callbackhell.com/ 以 了 解 更 多 内 容 。 
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针对 此 类 问题 ， 这 里 引入 了 Promise 这 一 概念 ， 下 面 先 通过 代码 形式 对 其 予以 实现 。 
对 此 ， 需 要 利用 'henable' 链 替换 之 前 传统 的 回调 方式 ， 如 下 所 示 。 


$.getJSON ('http://LIocalhost:3300/") 
-then ( (jsonData)=>{ 
console.1og("jsonData"，]jsonData) 7 
return jsonData; 
1 
.then( (jsonDataAgain)=>{ 
console.log("recieved jsonData again", jsonDataAgain); 
return jsonDataAgain; 

壤 

Promise 背后 包含 了 两 个 简单 的 状态 ， 如 下 所 示 。 

口 resolved: 表示 为 Promise 的 一 种 状态 ， 其间， 相关 功能 已 成 功 完成 。 上 述 示 例 请 
求 了 localhost:3300， 并 作为 jsonData 成 功 地 接收 到 响应 (响应 头 中 的 status-code 
200)。 随 后 ， 该 响应 在 then0 方 法 的 回调 中 被 接收 。 

口 rejected: 表示 为 Promise 的 一 种 状态 ， 在 这 种 状态 下 ， 相 关 功 能 无 法 安装 予以 完 
成 。 对 此 ， 下 列 代码 在 then 的 回调 中 抛 出 一 个 错误 。 

$.getJSON('http://localhost:3300/') 

.then ( (jsonData)=>{ 

throw "Error: Something is wrong"; 
return jsonData; 
和 
.then ( (jsonDataAgain)=>{ 
console.log("recieved jsonData again", jsonDataAgain); 
return jsonDataAgain; 
向 
-Catch ( (error)=>{ 
console.1og("EFrror handled", error); 
}) 


其 中 ， 显 式 地 抛 出 错误 可 通过 Promise 的 catch0 方 法 予以 处 理 。 在 发 送 请 求 时 或 接收 
请 求 之 后 可 能 发 生 的 所 有 错误 都 可 以 在 catch0 方 法 中 捕获 。 
注意 ， 在 第 一 个 then() 方 法 的 回调 中 所 返回 的 任何 内 容 都 可 以 被 同 级 的 相 邻 then0 方 
法 接收 。 

3.4.3 新 的 ECMAScript 生成 器 


如 果 读者 厌倦 了 JavaScript 中 的 回调 风格 ,或 者 更 趋向 于 阻塞 或 暂停 异步 执行 ， 并 在 
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接收 


功能 。 


入 一 


对 其 


成 器 
得 到 


到 数据 时 对 其 予以 恢复 ， 则 会 偏向 于 ECMAScript 在 JavaScript: generator 中 引入 的 新 


简单 地 讲 ， 生 成 器 是 一 类 从 代 函数 ， 主 要 包括 以 下 内 容 。 
口 生成 某 种 类 型 的 数据 。 
口 使 用 yield 语句 暂停 或 恢复 执行 。 
口 在 语法 上 ， 通 过 function *functionName 或 function*functionName 加 以 表示 。 
口 如 果 需 要 连续 生成 所 监听 的 事件 ， 可 采用 无 限 循 环 。 
上 述 内 容 也 表示 为 生成 器 的 规范 。 为 了 简化 定义 , 下 面 考 查 如 何在 AJAX 示例 中 实现 
在 该 示例 中 , 异步 行 表示 为 $.getJSON('http://localhost:3300/), 此 处 将 在 生成 器 函数 中 
予以 隔离 。 当 编写 生成 器 函数 时 ， 需 要 遵循 以 下 指导 原则 。 
口 包含 生成 器 语法 ， 如 下 所 示 。 
function* generateData(){} 
口 包含 yield 语句 ， 如 下 所 示 。 
function* generateData(){ 
yield $.getJSON('http://localhost:3300/'); 
| 
口 一旦 生成 器 函数 就 绪 ， 即 可 像 其 他 函数 那样 对 其 加 以 调用 ， 如 下 所 示 。 


const generatorInst = generateData(); 


这 里 ，generateData0) 函 数 将 返回 一 个 迭代 器 对 象 ， 而 不 是 响应 数据 。 
口 ” 当 获取 响应 数据 时 ， 若 存在 一 个 迭代 器 对 象 ， 则 需要 调用 next0 方 法 。 下 列 代码 
调用 了 单 击 按钮 操作 上 的 next0 方 法 。 
$('#getFeed') .click(()=>{ 
console.1og (generatorInst .next ()); 
Wy 
首次 单 击 按钮 后 ， 对 应 输出 结果 如 图 3.4 所 示 。 
口 一 旦 获取 数据 并 第 二 次 单 击 按钮 ， 输 出 结果 如 图 3.5 所 示 。 
可 以 看 到 ，done 的 键 值 为 tue，value 键 为 undefined。 这 意味 着 ， 执 行 过程 到 达 了 生 
函数 的 结尾 〈 不 存在 任何 迭代 可 获取 数据 )。 因 此 ， 自 第 二 次 单 击 操作 开始 ， 我 们 将 
类 似 的 数据 。 
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Elements Console Sources Network ”Performance Memory Application » ; Xx 


Y | Fiter Default levels Y 从 


jquery-ajax.html;22 
9 fvalue: {»m}, done: false} 
done: false 
vvalue: 

babort: f (a) 
palways: f () 
pcatch; f (a) 
bdone: Ff () 
pfail: f () 
bp getAllResponseHeaders: f () 
getResponseHeader: 了 (a) 
b overrideMimeType: f (a) 
ppipe: 了 () 
pprogress; f () 
kb promise; f (a) 

readyState: 4 
Pp responseJSON: (2) [{..}, {~}] 

responseText; "[{"studentid":101, "firstname":"John","lastname":"Doe", "classes": ["Business Res| 
b setRequestHeader: f (a,b) 
pstate: f () 


图 3.4 


[ER 品 Elements Console Sources Network Performance Memory Application » 
© top Y | Fikter Default levels Y 


b {value: {~}, done: false} jquery-ajax.h 


p {value: undefined, done: true} jquery-ajax.html:22 


图 3.5 
当 在 所 有 单 击 行为 上 生成 数据 时 ， 可 在 生成 器 函数 generateData0 中 做 出 如 下 调整 。 


function* generateData(){ 
while(true){ 
yield $.getJSON('http://localhost:3300/'); 


人 

当前 ， 每 次 单 击 Get Feed 按钮 时 ， 将 会 看 到 获取 的 响应 数据 。 

综 上 所 述 ， 我 们 已 经 通过 回调 、Promise 和 生成 器 等 方式 生成 了 AJAX 请 求 。 其 中 ， 
每 种 机 制 包含 了 自身 的 优势 ， 以 及 相应 的 ECMAScript 版 本 实现 。 在 学 习 了 浏览 器 中 的 
JSON 获取 机 制 之 后 ， 接 下 来 将 解析 所 接收 的 数据 ， 以 供 其 他 操作 使 用 。 
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3.5 解析 JSON 数据 


在 介绍 了 jQuery 之 后 ， 下 面 将 在 某 个 事件 上 触发 一 个 AJAX 请 求 ， 例 如 单 击 按钮 ， 
如 下 所 示 。 
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在 上 述 代码 片段 中 ,让 我 们 从 查看 HTML document 对 和 象 开始 。 这 里 ，div 元 素 包 含 了 
一 个 空 的 无 序列 表 。 这 个 脚本 的 目的 是 利用 单 击 按钮 时 的 列表 项 填充 无 序列 表 。input 按 
钮 元 素 的 id 值 为 "getFeed"， 单 击 事件 处 理 程序 将 绑 定 到 该 按钮 上 。 考 虑 到 AJAX 的 异步 
特性 ， 同 时 我 们 为 这 个 按钮 分 配 了 一 个 回调 ， 所 以 在 加 载 document 对 象 时 ， 不 会 对 活 
动 服务 器 进行 AJAX 调用 , 且 仅 将 HTML 结构 加 载 到 页 面 上 , 并 将 事件 绑 定 到 这 些 元 素 
es 

当 单 击 按钮 时 ， 将 通过 geUSON 方法 向 Web 服务 器 产生 AJAX 调用 ， 并 检索 JSON 
数据 。 考 虑 到 将 得 到 一 个 Student 数组 ， 因 而 可 将 检索 到 的 数据 传递 至 jQuery 的 each 和 迭 
代 器 中 ， 且 每 次 检索 一 个 元 素 。 在 该 迭代 器 内 部 ， 将 构建 一 个 字符 串 ， 该 字符 串 作 为 列表 
项 附加 到 "feedContainerList" 无 序列 表 元 素 中 ， 如 图 3.6 所 示 。 


AJAX using jquery 


Get Feed 
。 Student Id is 101 and the studentname is John and Doe 
。 Student Id is 102 and the student name is Jane and Dane 


图 3.6 
除非 单 击 按钮 ， 和 否则 不 会 有 任何 行为 上 的 改变 。 单 击 按钮 后 ， 无 序列 表 将 被 填充 。 


3.6 本 章 小 结 


XMLHttpRequest 对 象 的 流行 ， 对 于 Web 开发 人 员 来 说 无 疑 是 一 条 好 消息 。 本 章 首 先 
讨论 了 这 方面 的 基础 知识 , 例如 产生 AJAX 请 求 所 需 的 相关 内 容 。 此 外 ， 本 章 还 进一步 介 
绍 了 XMLHttpRequest 对 象 如 何 产生 异步 请 求 。 接 下 来 我 们 还 学 习 了 功能 强大 的 JavaScript 
库 jQuery， 并 通过 jQuery 执行 AJAX 操作 一 一 这 也 仅 是 AJAX 之 旅 的 开始 阶段 。 第 4 章 
将 探讨 AJAX 更 加 复杂 的 应 用 场合 、 跨 域 异步 请 求 失败 ， 以 及 JSON 如 何 通 过 跨 域 异步 调 
来 节省 操作 时 间 。 


第 4 章 跨 域 异步 请 求 


第 3 章 使 用 了 jQuery 的 geUSON 获取 学 生 的 JSON 提要 。 本 章 将 对 此 进一步 讨论 并 
向 服务 器 发 送 请 求 参数 。 另 外 ,第 3 章 中 还 介绍 了 跨 域 请 求 ， 本 章 则 在 此 基础 上 深入 讲解 
这 一 话题 。 本 章 主要 涉及 以 下 内 容 。 

口 使 用 JSON 数据 生成 GET 和 了 POSTAJAX 调用 。 

口 与 跨 域 调用 相关 的 问题 。 

口 JSONP 简介 。 

口 JSONP 实现 。 

让 我 们 从 理解 API 的 概念 开始 本 章 内 容 。 


4.1 API 


数据 提要 一 般 包 含 较 大 的 数据 量 且 兼 具 通用 性 ， 但 这 对 于 目标 搜索 来 说 可 能 过 于 繁 
重 。 例 如 ， 在 学 生 JSON 提要 中 ， 我 们 公开 了 学 生 信息 的 整个 列表 。 如 果 数 据 供 应 商 正在 
查找 注册 了 某 些 课程 的 学 生 ， 或 者 居住 在 给 定 邮编 内 的 实习 生 ,， 那么 ， 此 类 提要 须 具备 通 
和 性 。 通 常 可 以 看 到 ， 开 发 团队 负责 构建 应 用 程序 编程 接口 (Application Programming 
Interface，API)， 进 而 为 数据 供应 商 提供 多 种 搜索 方式 。 这 对 于 数据 供应 商 和 持 有 信息 的 
公司 来 说 是 一 个 双赢 的 局 面 ,因为 数据 供应 商 只 获得 他 们 想 要 的 信息 ， 而 数据 提供 商 只 发 
送 请 求 的 数据 ， 因 此 节省 了 大 量 的 带宽 和 服务 器 资源 。 


4.2 利用 JSON 数据 生成 GET 和 了 POST 调用 


需要 注意 的 是 , 我 们 应 理解 同步 和 异步 调用 都 是 通过 HTTP 进行 的 , 因此 数据 传输 过 
程 是 相同 的 。 对 于 客户 端 至 服务 器 间 的 数据 传输 ， 较 为 流行 的 方法 是 GET 和 POST; 而 
最 为 常见 的 请 求 方法 则 是 GET。 当 客户 端 请 求 一 个 Web 页 面 时 ，Web 服务 器 使 用 URL 
处 理 HTTP 请 求 。 相 应 地 ， 附 加 到 URL 的 任何 其 他 参数 都 用 作 从 客户 机 发 送 到 服务 器 的 
数据 。 鉴 于 参数 也 是 URL 中 的 一 部 分 内 容 ， 因 而 明确 区 分 何 时 使 用 GET 请 求 方法 (以 及 
何 时 不 使 用 GET 请 求 方法 ) 是 非常 重要 的 。GET 方法 一 般 用 于 传递 诸如 页 码 、 链 接地 址 
或 分 页 中 的 限制 条 件 和 偏 移 量 等 信息 。 需 要 注意 的 是 ， 对 于 GET 请 求 方法 可 以 传输 的 数 
据 量 ， 一 般 存 在 一 定 的 限制 。 
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我 们 将 与 一 个 修改 后 的 学 生 API 协同 工作 ， 并 于 其 中 查询 完整 的 学 生 信息 一 一 学 生 
所 居住 的 邮政 编码 以 及 注册 的 课程 ; 还 可 通过 组 合 搜索 获取 居住 在 特定 区 域 , 同时 选取 了 
某 一 门 课程 的 学 生 。 
读者 可 访问 以 下 GitHub 链接 以 获取 本 章 的 示例 代码 。 


https://github.com/bron10/jsonessentials-book/tree/master/ 
chapter%®%204 


下 列 内 容 列 出 了 第 一 个 目标 搜索 (通过 邮编 ) 的 URL。 


http://localhost:3300/?zipcode=400002 


该 API 调用 将 返回 居住 在 给 定 邮编 区 域内 的 全 


tT 


©  [) localhost3300/7zipcode=4 
€ C © localhost 


I{"studentid":102, "firstname":"Jane", "lastnane": "Dane", "zipcode":400002, "classes": 


{Markating", "Reononina", "Pinance" ]}] 


图 4.1 
在 和 我 们 接收 到 一 名 学 生 的 详细 信息 ， 对 应 的 邮政 编码 为 400002。 针 对 
这 一 输出 结 需要 在 节点 服务 器 appjjs 文件 中 进行 适当 调整 ， 如 下 所 示 。 


const http = require('http'); 
const port = 3300; 
const Urlobject = require('url'); 
const querystring = require('querystring'); 
let studentsData = require('./student data.json'); 
http.createServer((req, res) => { 
let Url = req.url; 
const UrlParsedobject = urlobject.parse (req.url); 
const pathname = urlParsedObject .pathname; 
const queryObject = querystring.parse (urlParsedObject .query); 
res.writeHead(200, { 
"Content-Type": "application/json", 
"Access-Control-Allow-Origin™: "xm 
DD); 
switch (pathname) { 
Ce A 
let student = studentsData.filter((student)=>{ 
return student.zipcode == queryObject.zipcode; 
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}) 
res.write(JSON.stringify (student)); 
res.end(); 
break; 
} 
}) .listen (port); 
console.1og(`Node Server is running on port: ${port}.) 


首先 ， 代 码 中 添加 了 两 个 本 地 节点 require(url) 和 require(querystring)。 前 者 提供 了 从 
URL 字符 串 中 解析 数据 的 方法 。 当 前 示例 中 包含 了 一 个 请 求 URL， 用 于 简单 地 解析 YRL 
查询 。 因 此 ， 这 里 将 ?zipcode=400002 转换 为 JSON 对 象 {zipcode: 400002} 以 便于 访问 。 

关于 querystring 包 的 更 多 信息 ， 读 者 可 访问 https://nodejs.org/docs/latest-v7.x/api/ 
querystring.html 。 

除 此 之 外 , 关于 URL 包 的 更 多 信息 , 读者 可 访问 https://nodejs.org/docs/latest-v7.x/api/ 
url.html。 

需要 注意 的 是 ， 一 旦 得 到 了 查询 数据 ， 即 可 遍历 studentsData 数组 ， 并 利用 邮政 编码 
键 过 滤 学 生 数 据 。 最 终结 果 将 写 入 响应 中 ; 在 调用 了 响应 的 end() 方 法 后 ， 数 据 将 发 送 至 
客户 端 。 

男 一 个 需要 注意 的 是 switch-case 语句 , 该 语句 用 于 区 分 所 有 路 由 。 这 样 ,只 须 在 switch 
中 轻松 地 插入 一 个 case， 即 可 添加 更 多 的 路 由 。 

get-students.html 中 的 代码 如 下 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Get all students</title> 
<!-- Go to https://code.jquery.com/ for more details --> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script> 
<script> 
$ (document) .ready(() => { 
$.ajax({ 
az "hEtp://localhost:3300", 
ED ORT 
lata Ee 
"dataType":"JSON" 
3 
-done ( (data)=>{ 
console.log(data); 
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3 
}) 
</script> 
</head> 
<body> 
<h2>Get all students</h2> 


<p>Retrieve the students information of all students</p> 


</body> 
</html> 


代码 中 首先 导入 了 jQuery 库 。 由 于 页 面 中 引入 了 jQuery， 


因而 可 开始 使 


$ 变 量 。 代 


码 中 添加 了 一 个 回调 ， 并 在 文档 就 绪 后 被 触发 。 考 虑 到 将 要 生成 GET 和 POST 请 求 ， 当 


前 示例 使 用 了 ajax0 方 法 。 


此 处 无 须 显 式 地 提 及 GET 类 型 ， 但 这 有 助 于 保持 与 代码 的 一 致 性 。 
在 AJAX 调用 中 ， 我 们 向 API 调用 设置 了 链接 的 URL 属性 ， 以 便 检索 学 生 信息 ， 并 


指定 这 将 通过 HITP GET 方法 予以 执行 。 代码 中 设置 的 第 4 个 属性 是 dataType, 表示 期 望 
返回 的 数据 类 型 。 由 于 与 学 生 的 提要 信息 协同 工作 ， 因 而 需要 将 dataType 属性 设置 为 
JSON。 这 里 应 注意 ， 服 务 器 向 异步 请 求 发 送 响应 时 所 触发 的 done 回调 。 我 们 将 从 服务 器 


发 送 来 的 数据 作为 响应 予以 传递 ， 并 启动 回调 。 


0 .done 是 一 个 成 功 的 回调 验证 ， 类 似 于 readyState=4 和 request.status=200; 对 此 ， 
可 参考 第 3 章 中 的 相关 内 容 ， 其 间 ， 曾 利用 JavaScript 生成 异步 调用 。 


对 应 的 输出 结果 如 图 4.2 所 示 。 


Get all students 


Retrieve the students information of all students 


Elements Console Sources Network Performance Memory Applcation » 


Y | Fiker Defauit levels ™ 


YArray(2) 


get-student .html:19 


»0: {studentid: 101, firstnane: "John", lastnane: "Doe", zipcode: 490081, classes: Array(3)} 
*1: {studentid: 102, firstnane: "Jane", lastnane: "Dane", zipcode: 498002, classes: Array(3)} 


ength: 2 
> _proto, 


: Array(e) 
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在 Console 窗口 中 ， 可 以 看 到 源 自 服务 器 的 JSON 提要 响应 结果 。 该 JSON 提要 包含 
了 大 量 信息 一 一 对 应 数据 来 自 所 有 的 学 生 。 接 下 来 将 根据 邮政 编码 获取 学 生 记录 。 针 对 当 
前 示例 ， 我 们 将 使 用 zipcode 参数 ， 并 通过 HTTP GET 方法 将 一 个 值 异 步 传 递 给 服务 器 。 
这 一 API 调用 将 为 数据 供应 商 提供 如 下 服务 : 这 些 供应 商 希望 搜索 特定 区 域内 的 实习 生 。 


$.ajax({ 
"aril”=- hetp//LocalhosE:3300", 
"Eype": “GET 
"data": {"zipcode": "400001"}, 
"dataTYPE":"JSON" 

}) 

.done ( (data)=>{ 
console.1log (data); 

}) 


代码 首先 导入 了 jQuery 库 ， 然 后 绑 定 一 个 回调 函数 ， 以 准备 在 加 载 文档 时 所 触发 的 
事件 。 需 要 注意 的 是 ， 此 处 采用 了 data 属性 发 送 邮 政 编码 的 键 - 值 对 ， 如 图 4.3 所 示 。 


Targeted student search 


Retrieve the students information based on the zipcode 


山 Elements Console Sources Network ”Performance Memory Application 六 HH 


© | top v | [Fner Defauit evals 次 
targeted-student-—search-zip,html:19 


vArray(1) 
pO: {studentid: 101, firstname: "Jonn", lastname: "Doe", zipcode: 400801, classes: Array(3)} 


:Array(9) 
图 4.3 
当 调 用 被 触发 后 ， 响 应 结果 将 输出 至 Console 窗口 中 。 其 中 ， 邮 政 编码 400001 匹配 
了 一 个 用 户 ， 学 生 信 息 则 通过 JSON 提要 传 回 。 相 应 地 ， 有 针对 性 地 搜索 可 帮助 我 们 缩小 
搜索 范围 ， 进 而 提供 所 搜索 的 数据 。 下 一 个 目标 搜索 将 采用 学 生 注册 的 课程 检索 数据 。 
对 此 ， 可 将 邮政 编码 搜索 模式 切换 为 学 生 注册 的 课程 ， 如 下 所 示 。 


http://localhost:3300/?class=Economics 
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在 该 示例 中 ，URL 将 返回 注册 了 课程 Economics 的 全 部 学 生 信 息 。 在 服务 器 端 ， 需 
要 对 包含 casey 的 URL 进行 修改 ， 如 下 所 示 。 


在 客户 端 ， 则 需要 在 浏览 器 中 运行 下 列 HTML 代码 。 
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<h2>Targeted student search</h2> 

<p>Retrieve the students information based on classes thy are enrolled 
in.</p> 
</body> 
</html> 


该 示例 基本 等 同 于 基于 邮政 编码 的 目标 搜索 ， 此 处 利用 课程 信息 替换 了 邮政 编码 信 
息 。 相 应 地 ， 这 将 检索 注册 了 课程 Economics 的 全 部 学 生 ， 对 应 结果 如 图 4.4 所 示 。 


Targeted student search 


Retrieve the students information based on classes thy are enrolled in. 


民间 Elements Console Sources Network Performance Memory Applicaton » 
© |top v | Fiter Default levels Y 


Array(1) targeted-student-search-class.html:19 
vo: 
pclasses: (3) ("Marketing", "Economics", "Finance"] 
firstname: "Jane" 
lastnane: "Dane" 
studentid; 192 
zipcode: 499902 
Pproto_; Object 
length; 1 
bp_proto_: Array(9) 


图 4.4 


前 述 内 容 讲述 了 通过 HTTP GET 方法 生成 异步 调用 的 多 个 示例 ， 接 下 来 将 把 对 应 数 
据 推送 至 服务 器 ， 以 便利 用 API 添加 学 生 信息 。 API 中 的 最 后 一 个 调用 将 由 用 于 添加 学 生 
的 HITPPOST 方法 提供 支持 。 

POST 请 求 方法 常用 于 发 送 较 大 的 数据 。 与 GET 方法 不 同 ， 数 据 将 通过 HTTP 消息 
体 进行 传输 。 我 们 可 采用 诸如 Fiddler， 或 通过 浏览 器 中 的 开发 工具 跟踪 途经 消息 体 的 数 
据 。 通 过 POST 方法 传递 的 消息 无 法 添加 书签 或 被 缓存 ， 这 一 点 与 GET 方法 不 同 。POST 
方法 通常 用 于 在 使 用 表单 时 发 送 数据 。 

当 处理 服 务 器 端的 POST 请 求 时 ， 需 要 在 节点 服务 器 中 进行 适当 的 调整 ， 并 在 switch 
语句 中 添加 一 条 case /addUser': 语 句 ， 如 下 所 示 。 
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case "/addUser ' : 

let jsonstring = "'" 

req.on('data', (chunk) => { 
jsonstring += chunk; 

3 

req.on('end', () => { 
let parseJSON = JSON.parse (jsonstring); 
studentsData.push (jsonstring); 
res.end(JSON.stringify(jsonstring)); 

3 

break; 

下 面 简要 地 介绍 一 下 服务 器 端的 数据 处 理 。 

口 默认 状态 下 ， 不 会 在 请 求 参 数 中 直接 接收 体 信 息 。 相 反 ， 需 要 在 请 求 对 象 data 
监听 器 上 监听 所 请 求 的 数据 , 这 意味 着 将 在 事件 data 监听 器 上 收集 请 求 数据 。 
旦 数据 从 请 求 处 收集 完毕 ， 将 会 自动 触发 请 求 end 事件 。 

口 事件 end 监听 器 的 回调 执行 简单 的 操作 ， 即 将 数据 推送 至 student 数组 中 ， 并 通 
过 将 整个 student 数据 发 送 回 客户 端 进行 响应 。 这 里 应 确保 将 studentsData 的 标识 
符 关 键 字 从 const 更 改 为 显示 导入 时 使 用 的 关键 字 。 

所 以 ， 回 到 客户 端 ，POST 请 求 所 需 的 URL 如 下 所 示 。 

http://localhost:3300/addUser 


作为 HTTP POST 方法 ， 所 传递 的 数据 处 于 不 可 见 状态 。 下 面 将 通过 脚本 访问 此 类 调 
用 。 其 中 ， 第 一 个 脚本 将 访问 提供 所 有 学 生 信息 的 API 调用 。 

我 们 将 使 用 addUser 调用 动态 地 添加 一 名 学 生 。 据 此 ， 开 发 团队 可 利用 外 部 资源 将 学 
生 信息 添加 至 数据 库 中 。 例 如 ， 假 设 作 为 一 个 学 生 信息 聚合 器 ， 我 们 向 多 家 数据 供应 商 出 
售 整合 后 的 学 生 信息 。 当 聚合 此 类 信息 时 ， 可 能 需要 采用 Spider (脚本 将 访问 网 站 并 获取 
数据 ) 或 外 部 资源 〈 数 据 于 其 中 呈现 为 非 结 构 化 状态 ) 实现 这 一 任务 。 因 此 ， 我 们 将 结构 
化 数据 ,并 使 用 这 一 addUser API 调用 将 结构 化 的 学 生 数据 信息 摄取 到 数据 存储 中 。 同时， 
可 以 将 此 方法 公开 给 受信 任 的 数据 供应 商 ， 以 使 我 们 的 数据 存储 成 为 一 个 单 点 数据 位 置 。 
这 对 两 家 公司 来 说 是 一 个 双赢 的 结果 : 我 们 可 获得 更 为 丰富 的 学 生 信息 ; 数据 供应 商 则 将 
学 生 信息 存储 在 远程 位 置 处 。 

下 列 代码 展示 了 addUser POST 调用 的 生成 方式 。 

//add-user.html 

<!DOCTYPE html> 


<html> 
<head> 


。50 。 
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<title>Adding a student</title> 

<!-- Go to https://code.jquery.com/ for more details --> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script> 

<script> 

$ (document) .ready(() => { 


const 
const 
const 
const 
const 


first name = "kent"; 

last name = "clark"; 

addresses = ["5400 W Parmer Ln", "1919 Elridge Pkwy"]; 
zipcodes = ["78757", "77887"]; 

classes = ["International Business", "Economics Statistics"]; 


$.ajax({ 
"url": "http://localhost:3300/addUser", 
"type": "POST", 
"data"s Tf 
"first name": first name, 
"last name": last name, 
"addresses": addresses, 
"zip codes": zipcodes, 
"classes": classes 


}, 


"content-type": "application/json; charset.utf-8", 
"dataType": "JSON" 

}) .done (function(data) { 
console.log(data); 


DD); 
ps 


</script> 


</head> 
<body> 


<h2>Adding a student</h2> 
<p>Storing the student information</p> 


</body> 
</html> 


上 述 调 用 执行 了 多 项 任务 。 首 先 ， 我 们 声明 了 一 些 变 量 加 载 本 地 数据 。 具 体 来 说 , 局 


部 变量 将 加 载 学 生 姓名 的 字符 串 值 ， 其 他 一 些 变 量 则 加 载 课程 数组 、 邮 政 编码 和 地 址 。 在 


AJAX 调用 中 ， 第 一 个 值得 注意 的 变化 是 类 型 属性 。 由 于 将 推送 大 量 的 用 户 数 据 ， 一 般 会 


使 用 HTTP POST 方法 。data 属性 将 使 用 为 名 称 、 姓 氏 、 地 址 、 邮 政 编码 和 类 声明 的 局 部 


变量 。 在 API 中 ， 当 用 户 成 功 地 添加 到 数据 库 时 ， 我 们 在 响应 中 发 送 一 个 学 生 列 表 ， 该 


列表 将 被 输出 到 Console 窗口 中 。 
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当 验 证 新 的 'student 是 否 已 被 添加 至 数据 库 时 ， 可 检测 最 后 一 个 数组 元 素 的 响应 结果 ， 
或 者 运行 getStudents API 调用 以 查看 完整 的 用 户 列表 。 

在 学 生 提要 中 的 最 后 一 名 学 生 是 Kent Clark 一 一 测试 代码 以 确保 一 切 正常 工作 是 十 
分 重要 的 。 在 处 理 动态 数据 时 ,维护 数据 完整 性 同样 非常 重要 。 每 当 对 用 户 或 其 依赖 项 执 
行 CRUD 操作 时 ， 必 须 通 过 查看 检索 到 的 数据 ， 以 及 执行 数据 验证 检测 ， 进 而 验证 该 数 
据 存储 上 的 数据 完整 性 。 
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截止 到 目前 ， 所 有 的 异步 调用 均 位 于 阶段 服务 器 上 。 其 中 ,节点 服务 器 负责 处 理 基 于 
CORS 的 各 项 功能 。 在 某 些 情况 下 ， 我 们 希望 从 不 同 的 域 加载 数 据 ， 例 如 ， 从 其 他 API 
获取 数据 , 这 些 API 可 能 不 支持 CORS。 服务 器 端 程序 设计 可 用 来 处 理 这 类 调用 ; 相应 地 ， 
可 以 使 用 cURL 并 针对 不 同 的 域 进行 HITP 调用 ， 从 而 获取 此 类 数据 。 由 于 需要 对 服务 器 
生成 调用 ， 而 服务 器 又 调用 另 一 个 域 来 获取 数据 ， 并 返回 客户 端 程序 ， 因 而 这 增加 了 我 们 
对 服务 器 端 应 用 程序 的 依赖 。 或 许 这 并 不 是 一 类 严重 的 问题 ， 但 此 时 正在 向 Web 架构 中 
添加 一 个 附加 层 。 为 了 避免 生成 服务 器 端 调用 ， 可 尝试 对 不 同 的 域 执行 异步 调用 。 例 如 ， 
可 采用 学 生 的 JSON API 获取 数据 。 

由 于 在 节点 服务 器 上 处 理 了 CORS, 因而 需要 在 节点 服务 器 项 目 中 对 appjs 做 如 下 修改 。 

res.writeHead(200, { 

"Content-Type": "application/json", 
//"Access-Control-Allow-Origin™: "*™ 
1 


在 上 述 代 码 片 段 中 ， 我 们 注释 掉 了 Access-Control-Allow-origin 选项 ， 用 于 模拟 未 经 
处 理 的 跨 源 资源 请 求 。 随 后 运行 HTML 代码 ， 如 下 所 示 。 


<!--get-student-cor.html--> 
<!DOCTYPE html> 
<html> 
<head> 
<title>Get all students</title> 
<!-- Go to https://code.jquery.com/ for more details --> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script> 
<script> 
$ (document) .ready(() => { 
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$.ajaz({ 
norm http /Localhost: SSDO 
type "GPE™, 
moatan Tl 
"dataTYPE":"JSON" 
}) 
.done ( (data)=>{ 
console.1log(data); 
}) 
}) 
</script> 
</head> 
<body> 
<h2>Asynchrnous call for student api</h2> 
<p>Cross origin request neither handled at server not at client 
side</p> 
</body> 
</html> 


当 跨 域 生成 上 述 异 步调 用 时 ， 对 应 的 输出 结果 如 图 4.5 所 示 。 


Asynchronous call for student api 


Cross origin request neither handled at server nor at client side 


[RU Eements Console Sources Network Performance » ©@1| : x 
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get-student-cor. html:1 
Allow-Origin' header is present on the requested resource. Origin ‘null' is 
therefore not allowed access 


图 45 


当前 异步 调用 中 ，Console 窗口 中 显示 了 一 条 错误 消息 ， 表 示 XMLHTTPRequest 
对 象 不 能 加 载 我 们 提供 的 URL， 因 为 它 不 是 来 自 浏览 器 的 当前 域 ， 这 导致 我 们 违反 了 源 
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协议 。 同 域 策略 是 Web 浏览 器 遵循 的 安全 措施 ， 目 的 是 防止 一 个 域 访问 另 一 个 域 上 的 信 
息 。Web 应 用 程序 使 用 cookie 存储 关于 用 户 会 话 的 基本 信息 ， 以 便 在 用 户 下 一 次 请 求 相 
同 的 Web 页面， 或 在 相同 域 中 请 求 不 同 的 Web 页 面 时 提供 直观 的 用 户 体 验 。 为 了 防止 外 
部 网 站 窃取 这 些 信息 ，Web 浏览 器 遵循 同 源 策 略 。 

同 域 策略 在 输入 的 请 求 中 查询 3 项 事务 ， 即 主机 、 端 口 和 协议 。 为 了 减缓 此 类 问题 ， 
下 面 讨论 一 种 称 为 JSONP 的 CORS 处 理 方法 。 
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当 处 理 同 源 策略 这 一 类 问题 时 ， 可 采用 JSONP 基于 填充 的 JSON) 方案 。 同 源 策略 
下 的 一 个 例外 是 <scrip 尼 标签 ， 因 此 脚本 可 以 跨 域 传递 。JSONP 据 此 将 数据 作为 脚本 跨 域 
传递 ， 方 法 是 通过 填充 方式 使 JSON 对 象 看 起 来 像 是 一 个 脚本 。 在 JavaScript 中 ， 当 调用 

个 包含 参数 的 函数 时 ， 我 们 可 调用 该 函数 并 添加 一 个 参数 ， 而 采用 JSONP 时 ， 可 作为 
参数 向 函数 传递 一 个 JSON 提要 ， 因 而 将 对 象 填充 至 函数 回调 中 。 相 应 地 ， 填 充 了 JSON 
提要 的 函数 须 用 于 客户 端 ， 进 而 检索 JSON 提要 。 图 4.6 显示 了 一 个 JSONP 示例 。 


Lntitled 


myCallback( { 


"studentid 

"firstna 

"lastname 

"classes": 
"Business Research", 
"Econonics", 
"Finance” 


图 4.6 
在 该 示例 中 , 我 们 向 myCallback0 函 数 中 填充 了 学 生 对 象 , 并 复 用 myCallback 以 检索 
学 生 对 象 。 在 理解 了 JSONP 的 工作 方式 后 ， 接 下 来 将 该 技术 应 用 于 应 用 程序 中 。 当 与 
JSONP 方案 协同 工作 时 ， 还 需要 得 到 服务 器 端 代 码 的 支持 。 下 面 讨论 服务 器 端的 一 些 变 
化 内 容 。 
4.4.1 服务 器 端 实现 


在 处 理 JSONP 请 求 时 ， 需 要 在 服务 器 端 实 现下 列 过 程 。 
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(1) 在 switch 代码 块 中 添加 一 个 case， 以 表示 一 个 JSONP 请 求 ， 查 看 下 列 代码 。 


case '/.jsonp': 
break; 


(2) 一 旦 “路 由 ”case 定义 完毕 后 ， 首 先 需 要 实现 一 个 查询 解析 逻辑 。 在 当前 示例 中 
已 经 通过 querystring.parse() 方 法 解析 了 查询 对 象 ， 这 将 从 URL 获得 作为 查询 参数 传递 的 
回调 详细 信息 。 随 后 需要 生成 一 个 JSONP 响应 : 首先 需要 将 JSON 响应 字符 串 化 ， 然 后 
将 其 填充 到 从 客户 端 接收 到 的 JSONP 回调 中 ， 如 下 所 示 。 


case’ TSOPYY 
//validate query parameter 
const jsonpCallback = queryObject.jsonp; 
if(!jsonpCallback){ 
return res.end(studentsData); 
}; 
let start = jsonpCallback + '(', end = ')'; 
let stringifiedstudentData = JSON.stringify 
(studentsData, undefined, 2); 
res.end(start + stringifiedstudentData + end); 
break; 


上 述 代 人 码 提供 了 查询 URL， 即 http://localhost:3300/jsonp?jsonp=getStudentData， 当 在 
浏览 器 中 执行 单 击 操作 时 ,将 提供 一 个 JSONP 响应 。 接 下 来 将 考查 JSONP 在 浏览 器 端的 


4.4.2 在 客户 端 ( 浏览 器 ) 实现 JSONP 


下 面 利用 新 创建 的 脚本 获取 JSON 提要 ) 替换 之 前 脚本 中 的 URL 属性 。 其 间 ， 诸 
如 URL 和 dataType 这 一 类 属性 将 被 修改 ， 同 时 加 入 了 contentType 和 jsonpCallback 这 一 
类 新 属性 。 前 述 内 容 已 经 讨论 了 URL 属性 的 变化 ， 接 下 来 查看 一 下 其 他 属性 ， 如 下 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Asynchronous Call to Reddit</title> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgF2ZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt 4=" 
crossorigin="anonymous"></script> 
<script> 
$ (document) .ready(() => { 
$.ajaz({ 


第 4 章 跨 域 异步 请 求 Ei 
"url": "http://localhost:3300/.jsonp?jsonp=getstudentData", 
type™s. CEBRYw 
a 
"dataType": "JSONP"， 
"jsonpCallback": "getstudentData" 
}) 
.done((data) => { 
console.1log (data); 
i 
}) 
</script> 
</head> 
<body> 
<h2>Asynchronous call for Students api</h2> 
<p>Cross request is not handled at server but at client</p> 
</body> 
</html> 
之 前 , 由 于 输入 的 提要 为 JSON 类 型 , 因而 dataType 属性 被 设置 为 JSON; 当前 , JSON 
提要 被 填充 至 一 个 回调 中 ， 因 而 应 做 适当 调整 以 体现 浏览 器 期 望 一 个 回调 , 而 非 JSON 自 
身 。 其 中 ，contentType 和 jsonpCallback 则 是 所 加 入 的 新 属性 ; 属性 contentType 用 于 指定 


发 送 至 Web 服务 器 的 内 容 类 型 ; jsonpCallback 将 接收 一 个 回调 函数 名 ，JSON 提要 将 填充 


于 其 中 。 


当 脚 本 被 触发 后 ， 源 自 getStudentData 回调 中 的 数据 将 被 检索 ， 并 传递 到 success 属 


性 中 ， 同 时 将 JSON 对 象 记录 至 控制 台 窗口 中 ， 对 应 的 输出 结果 如 图 4.7 所 示 。 


Asynchronous call for Students api 


Cross request is not handled at server but at client 


民间 Hements Console Sources Network Performance Memory Application 六 


© | top Y Fikter Default levels 了 


sonp.html:28 
ME 
pO: {studentid: 101, firstname: "John", lastname: "Doe", zipcode: 400001, classes: Array(3)} 
1: {studentid: 102, firstname: "Jane", lastname: "Dane", zipcode: 490002, classes: Array(3)} 
2: {studentid: 193, firstname; "Scott", lastname: "tiger", zipcode: 408092, classes: Array(3)} 
二 ， 
proto_: Array(@) 
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人 注意 ,JSONP 调用 是 一 个 脚本 调用 ,而 非 XHR 请 求 ， 因 此 JSONP 调用 将 出 现 
于 JS 或 <scripts> 标 签 中 ,而 不 是 Console 窗口 的 XHR 选项 卡 中 。 此 外 ，JSON 通常 是 一 
个 GET 方法 请 求 。 


4.5 本 章 小 结 


HTTP GET 和 POST 方法 是 两 个 较为 流行 的 HTTP 方法 , 并 在 客户 端 和 服务 器 间 传 输 
数据 。 本 章 深入 讨论 了 基于 异步 请 求 的 GET 和 POST 请 求 方法 的 数据 传输 方式 。 随 后 ， 
本 章 介 绍 了 跨 源 资源 问题 及 其 解决 方案 。 另 外 ， 本 章 还 探讨 了 JSONP 在 客户 端 和 服务 器 
端的 实现 。 

关于 跨 域 异步 请 求 ， 我 们 使 用 了 <scrip 人 标签 执行 JSONP 异步 脚本 调用 ， 以 获取 来 自 
不 同 域 中 的 数据 。 第 5 章 将 利用 各 种 客户 端 工具 对 JSON 进行 调试 。 
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JSON 在 过 去 几 年 中 飞速 发 展 ， 因 此 有 大 量 免 费 可 用 的 资源 可 以 帮助 我 们 理解 正在 使 
的 JSON 对 象 。 如 前 所 述 ，JSON 可 用 于 多 种 功能 ; 另外， 一些 令 人 忽视 的 内 容 往往 会 
引发 JSON 中 断 ， 例 如 双 引 号 、JSON 对 象 中 最 后 一 项 上 的 逗号 ， 或 者 Web 服务 器 发 送 的 
错误 的 内 容 类 型 。 本 章 主要 涉及 以 下 主题 。 

口 快速 熟悉 开发 工具 。 
口 验证 JSON。 
口 利用 一 些 网 站 格式 化 JSON。 


5.1 使 用 开发 工具 


几乎 所 有 的 浏览 器 均 配 置 了 功能 强大 的 调试 工具 ， 以 帮助 我 们 理解 生成 的 请 求 ， 以 及 
所 返回 的 响应 结果 ， 例 如 Mozilla Firefox、Google Chrome、Safari 和 正 。 相 应 地 ，JSON 
既 可 以 是 请 求 中 的 部 分 内 容 ， 也 可 以 是 响应 结果 中 的 部 分 内 容 。Google Chrome、Safari 
和 较 新 版 本 的 正 均 内 建 了 开发 工具 。 对 于 Mozilla Firefox 来 说 ，Firebug 则 是 十 分 常用 的 
Web 开发 工具 箱 。Firebug 是 一 个 外 部 插件 ， 并 可 安装 在 浏览 器 中 。 这 也 是 最 早 的 Web 开 
发 工具 箱 , 旨 在 向 Web 开发 人 员 提 供 各 种 帮助 。 最 近 , Mozilla Firefox( 即 Firefox Developer 
Edition) 发 布 了 最 新 的 前 端 开 发 工具 ， 其 中 包括 开发 工具 箱 和 开发 环境 。 
Firefox 可 对 HTML DOM 树 进行 访问 ， 并 可 动态 地 查看 HTML 元 素 在 页 面 上 排列 方 
式 。 另 外 ， 浏 览 器 还 提供 了 一 组 开发 工具 ， 并 可 模拟 客户 端 上 的 Web 开发 过 程 。 下 列 内 
容 列 出 了 其 中 的 一 些 特性 。 
口 “在线 查 看 器 : 可 通过 在 线 方式 方便 地 查看 HIML、CSS 和 JS 代码 。 
口 JavaScript 调试 器 : 配置 了 Redux 和 React 等 最 新 工具 。 
口 Network 选项 卡 : 可 跟踪 全 部 资源 ， 例 如 图 像 、JavaScript 文件 、CSS 文件 、Flash 
媒体 以 及 客户 端 生成 的 异步 调用 。 除 此 之 外 ， 还 可 对 延迟 进行 监视 。 
口 ”Console 窗口 : 这 是 另 一 个 较为 常用 的 工具 。 顾 名 思 义 ， 该 窗口 提供 了 运行 期 内 
的 JavaScript 控制 台 信 息 ， 并 可 以 动态 方式 对 脚本 进行 测试 。 
当 加 载 Firefox (Firefox Developer Edition)、Google Chrome 和 Safari 的 开发 工具 时 ， 
可 在 Web 页 面 上 右 击 ， 随 后 从 选项 列表 中 选择 Inspect Element 选项 。 
当 与 Safari 协同 工作 时 ， 须 启用 开发 工具 ， 有 具体 如 下 。 
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口 单 击 Safari 菜单 选项 。 

口 选择 Preferences 并 单 击 Advanced 选项 卡 。 

口 在 菜单 栏 中 选择 Show develop menu， 并 可 对 开发 工具 进行 查看 。 

对 于 正 ， 按 键盘 上 的 F12 键 并 打开 开发 工具 窗口 。 在 第 3 章 中 ， 我 们 曾 对 Web 服务 
器 生成 了 第 一 个 异步 调用 ， 并 利用 jQuery 请 求 JSON 数据 。 接 下 来 ， 我 们 将 在 Firefox 
Developer Edition 的 浏览 器 中 调试 此 类 静态 HTML 文件 。 

开始 时 ， 需 要 启动 Node 服务 器 ， 以 便 客 户 端 脚 本 中 的 jQuery Ajax 调用 可 接收 数据 。 
对 此 ， 可 使 用 node-test-app 目录 中 的 命令 (参见 第 3 章 )， 如 下 所 示 。 


npm start 


在 浏览 器 中 打开 jquery-ajax.html 文件 , 并 利用 开发 工具 调试 数据 。 当 采用 Firefox Web 


浏览 器 时 ， 对 应 结果 如 图 5.1 所 示 。 


AJAX using jquery 


Get Feed 


器 Inspe 


! 一 jquery-ajax,htmt 一 > 


\ 

head head 
”<body> 

h2>AJAX using jquery</h2 


图 5.1 
并 选择 Inspect Element,， 默认 状态 下 将 加 载 html 选项 卡 ， 用户 将 
h 定 了 一 个 单 击 事件 处 理 程序 。 
FE ， 如 图 5.2 


在 加 载 页 面 上 ， 右 
看 到 HTML DOM 在 当前 示例 中 , 我 们 向 Get Feed 按钮 上 纪 
在 单 击 该 按钮 后 ， 可 查看 Console 输出 结果 。 对 此 ， 可 单 击 Console 选项 
所 示 。 

一 旦 检索 到 响应 结果 , JSON 提要 即 记录 至 Console 窗口 
方法 向 Console 窗口 中 输出 数据 ， 这 也 是 开发 工具 中 十 分 有 


中 。 本 书 主要 采用 consolelog 


的 一 个 特性 ， 这 对 于 理解 经 
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十 


AJAX using jquery 


Get Foed 
Student Id is 101 and the studcnt namc is John and Doc 
Student Id is 102 and the student name is Jane and Dane 


[Ca Inspector Console Debugger Style 


解析 、 显 示 后 的 JSON 提要 来 说 十 分 重要 。 除 此 之 外 ，Console 窗口 还 提供 了 一 种 简单 方 
式 以 对 JSON 提要 进行 分 析 。 接 下 来 将 访问 Firefox 中 的 Network 选项 卡 ， 进 而 了 解 客户 
端 所 期 望 的 、 客 户 端 和 服务 器 间 的 内 容 类 型 的 通信 方式 ， 如 图 5.3 所 示 。 


AJAX using jquery 
Get Feed 


Student Id is 101 and the student name is John and Doe 
Student Id is 102 and the student name is Jane and Dane 


Headers Cooki 
http://localhost:3300/ 


GET 

[::1]:3300 

®@ 200 Ok G 
HTTP/1.1 


图 5.3 


在 Network 窗口 中 ， 首 先 单 击 异步 调用 的 URL， 即 http://localhost:3300/。 单 击 该 链接 
后 ， 在 Headers 部 分 中 可 以 看 到 Accept 头 ， 其 期 望 内 容 为 application/json。 注 意 ， 左 侧 栏 
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中 显示 了 两 个 请 求 , 分 别 是 脚本 请 求 和 XHR 或 XMLHttpRequest, 并 通知 这 是 一 个 异步 请 
求 。Network 窗口 右 侧 的 Response 选项 卡 中 将 显示 针对 该 请 求 的 JSON 提要 。 


5.2 ”验证 JSON 


类 似 于 对 资源 进行 调试 , 存在 大 量 的 Web 工具 可 帮助 我 们 验证 所 构建 的 JSON。 其 中 
JSONLint 是 一 种 较为 常用 的 Web 工具 ， 并 可 对 JSON 提要 进行 验证 。 


人 当 与 JSONLint 协 同 工 作 时 ， 可 访问 https://jsonlint.com/ 以 了 解 更 多 信息 。 


JSONLint 包含 了 一 个 较为 直观 的 界面 ， 以 使 用 户 可 粘贴 需要 验证 的 JSON， 随 后 根据 
JSON 提要 返回 一 条 成 功 消息 ,或 一 条 错误 消息 。 下 面 首 先 验证 一 个 包含 某 种 问题 的 JSON， 
进而 查看 所 返回 的 错误 消息 ， 随 后 将 对 此 进行 修复 ， 并 再 次 查看 成 功 消息 。 

对 此 ， 可 复制 前 述 示例 中 的 students 提要 ， 并 在 第 二 个 元 素 的 结尾 处 添加 一 个 逗号 ， 
如 图 5.4 所 示 。 


C a Secure httpsyjsonlintcom 


pps 。 For quick wccess, pics your bookmar ks here on Ue bookimerks bar. ME bok om 


"atudentid": 101, 
"firstname": "John", 
"lastname": "Doe", 


"classes": ["Business Research", 


"studentid": 102, 
"firstname": "Jane”, 
"lastname": "Dane", 


classes": ["Marketing", "Economics", "Finance"] 


Validate JSON Clear Support JSONLint for $2/Month 


Results 


Error: parse error on line 11 
ics", "Finance"]}. ] 


Expecting ‘STRING', 'NUMBER’, ‘NULL', “TRUE', ‘FALSE’, ‘{°, “[', 
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注意 ， 此 处 在 JSON 对 象 的 最 后 一 项 处 添加 了 一 个 逗号 。JSONLint 提供 了 描述 性 错 
误 信 息 ， 这 也 是 JSONLint 的 优点 之 一 。 当 前 ， 我 们 遇 到 了 一 个 Parse error， 为 了 简单 起 
见 ， 该 消息 还 提供 了 错误 所 在 的 行 号 。 这 里 ， 解 析 器 期 望 一 个 字符 串 、 一 个 数字 、 一 个 
null 或 一 个 布尔 值 ; 由 于 我 们 未 提供 任何 内 容 , 因而 将 生成 一 条 错误 信息 ,对 此 , 可 向 JSON 
对 象 添加 一 个 新 项 来 证 明 逗 号 的 正确 性 ， 或 者 去 掉 辟 号， 因为 前 面 没有 任何 项 ， 如 图 5.5 
所 示 。 


C @ Secure https://isonlint.com 


For quick eccess, place your bookmarks here on the bookmarks bar Import book me row 


"studentid"; 
"firstname": " 
"lastname": 


"classes"s ["Bnsiness Research", "Fconomics", "Fi 


"studentid": 102, 
"firstname": "Jane", 
"lastname": "Dane", 


"classes"s ["Marketing", "Economics", "Finance"] 


Validate JSON Clear Support JSONLint for $2/Month 


Results 


Valid JSON 


图 55 


在 移 除 了 逗号 并 再 次 验证 时 ， 我 们 将 得 到 一 条 成 功 消息 。 易 用 性 和 描述 性 消息 使 得 
JSONLint 成 为 JSON 验证 的 首选 工具 之 一 。 


5.3 格式 化 JSON 


JSONLint 不 仅 是 一 个 在 线 JSON 验证 器 , 还 可 以 帮助 我 们 格式 化 JSON， 以 使 其 看 上 
去 更 加 美观 。JSON 通常 较 大 ， 在 线 编辑 器 需要 提供 一 种 树 形 结构 以 遍历 JSON 对 象 。 相 
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应 地 ，JSON Editor Online 即 是 一 种 深 受 喜爱 的 在 线 编辑 器 ， 并 可 格式 化 较 大 的 JSON 对 
象 ， 它 提供 了 一 种 便于 浏览 的 树 形 结构 ， 如 图 5.6 所 示 。 


New Openv Savev Settings w Help 


AR 


元 Geay [21 
0 {4 
"classes": [ p1 {4 
"Business Research", 
"Economics", 
"Finance" 


] 


"studentid": 
"firstname": 
"lastname" 
"classes": [ 
"Marketing", 
"Economics", 
"Finance” 


图 5.6 


0 当 与 JSON Editor Online 协同 工作 时 ,可 访问 https://jsoneditoronline.org/ 以 了 解 更 
多 信息 。 


首先 可 将 JSON 示例 代码 粘贴 到 左边 的 窗口 中 , 然后 单 击 中间 的 右 箭头 按钮 来 生成 树 
形 结构 。 一 旦 对 树 形 结构 进行 了 更 改 ,， 即 可 单 击 左 箭头 按钮 来 格式 化 数据 ， 使 其 可 以 在 其 
他 地 方 使 用 。 


5.4 本 章 小 结 


ele 


周 试 、 验 证 和 格式 化 是 开发 人 员 不 可 忽视 的 3 项 任务 。 本 章 介 绍 了 浏览 器 开发 工具 及 
其 使 用 方式 ,并 可 用 于 调试 任务 .此 外 ,我 们 还 分 别 讨论 了 JSONLint 和 JSON Editor Online， 
义 用 于 验证 和 格式 化 操作 。 
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本 章 是 JavaScript 和 JSON 基础 知识 的 最 后 一 部 分 内 容 ， 目 的 是 让 读者 深入 了 解 如 何 
以 JSON 数据 格式 存储 和 传输 数据 .其 中 涉及 在 同一 域内 通过 HTTP 异步 请 求 传输 JSON， 
以 及 跨 域 传输 HITP 异步 请 求 。 除 此 之 外 , 我 们 还 研究 了 JSON 数据 格式 应 用 方式 的 其 他 
实现 。 这 也 为 理解 JSON 以 开发 交互 式 和 响应 性 Web 应 用 程序 打下 了 坚实 的 基础 。 第 6 
章 将 具体 运用 我 们 学 习 的 前 端 脚本 知识 开发 一 个 Carousel 应 用 程序 。 
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前 述 章节 花费 了 大 量 的 篇 幅 介绍 JavaScript 和 JSON。 本 章 将 尝试 构建 基于 JSON 的 
端 到 端 项 目 ， 其 间 将 涉及 JavaScript、JSON 等 多 种 概念 、 服 务 器 端 程序 设计 、AJAX 和 
JSONP， 并 对 此 进行 适当 的 整合 。 本 章 主要 涉及 以 下 主题 。 

口 配置 应 用 程序 。 
口 、Bootstrap 简介 。 
口 维护 JSON 存储 。 
口 
本 音 


jQuery Cycle 实现 Carousel 功能 
将 设计 一 个 轮 播 提示 板 应 用 程序 ， 以 展示 当月 的 优等 生 。 该 应 用 程序 提供 了 轮 
播 功 能 ， 其 中 包括 导航 按钮 、 内 容 的 自动 播放 、 在 既定 点 显示 独立 项 ， 并 跟踪 内 容 的 首 、 


6.1 配置 Carousel 应 用 程序 


对 此 ， 首 先 需 要 配置 一 个 文件 夹 ， 并 加 载 该 应 用 程序 的 相关 文件 。 具体 来 说 ， 该 应 用 
程序 需要 使 用 一 个 HTML 文件 加 载 Carousel， 以 及 诸如 jQuery 和 jQuery Cycle 等 库 ( 因 
而 需要 导入 这 些 库 )。 除 此 之 外 ， 还 需要 使 用 加 载 数 据 的 JSON 文件 。 当 下 载 jQuery 文件 
时 ， 可 访问 https://jquery.com。 如 前 所 述 ，jQuery 是 一 种 较 常 使 用 的 JavaScript 库 ， 其 社 
区 也 处 于 不 断 壮 大 中 。 同 时 ， 本 章 将 使 用 jQuery Cycle 库 ， 以 进一步 丰富 Carousel 应 用 程 
序 的 各 项 功能 。jQuery Cycle 是 最 流行 的 轻 量 级 循环 库 之 一 , 具有 许多 特性 ， 如 响应 组 件 ， 
以 及 针对 按钮 和 节 流 速度 的 可 配置 交互 行为 。 读 者 可 访问 http://malsup.github.io/jquery. 
cycle.alljs 下 载 jQuery Cycle， 并 将 对 应 文件 重 命名 为 我 们 使 用 的 jquery.cyclejjs。 

接 下 来 将 生成 一 个 名 为 chapter 6 的 目录 ， 并 将 全 部 下 载 文 件 存储 于 其 中 ， 对 应 结构 
如 图 6.1 所 示 。 

至 此 ， 文 档 根 目 录 中 已 经 配置 了 相关 库 。 接 下 来 将 处 理 这 些 基 本 的 HTML 文件 ， 并 
将 此 类 文件 导入 Web 页 面 中 ， 如 下 所 示 。 

//index.html 

<!DOCTYPE html> 

<html> 


<head> 
<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
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<script type="text/javascript" src="jquery.cycle.j]s"></script> 
<script type="text/javascript"> 
$ (document) .ready(() => { 

console.log ("Ready!"); 


}) 

</script> 
</head> 
<body> 
</body> 
</html> 


carousel 


(9 VBOXA.. 


Computer 


ndex.html 


大 Home 
大 Desktop 
天 Documents 
夯 Downloads 
郁 Music 

i Pictures 

辆 Videos 

三 FileSystem 
四 Tash 


这 表示 为 最 初 的 索引 Web 页 


-EE 


index-v1.html jqueryjs jquery-cycle.js 


图 6.1 
I 面 , 并 将 JavaScript 文件 加 载 至 Web 页 面 中 。 当 通过 Web 


浏览 器 触发 该 文件 时 , 两 个 JavaScript 库 将 被 加 载 并 准备 就 绪 , 相关 消息 将 输出 至 Console 


窗口 中 。 接 下 来 将 要 处 理 数 据 文 
其 加 载 至 一 个 旋转 应 用 程序 中 。 


件 ， 这 与 之 前 讨论 的 学 生 的 JSON 提要 基本 类 似 ， 随 后 将 


6.2 ”生成 Carousel 应 用 程序 的 JSON 文件 


假设 我 们 是 一 家 教育 机 构 ， 按 照 惯例 ， 每 个 月 都 要 表彰 一 些 努力 用 功 的 学 生 。 每 个 月 


内 , 我们 将 对 每 门 课程 选取 一 些 
而 激励 其 他 学 生 ， 这 也 是 一 些 教 
提要 内 容 。 


排名 靠 前 的 学 生 ， 并 在 轮 播 提 示 板 上 显示 他 们 的 姓名 ， 进 
育 机 构 经 常 采 用 的 一 种 做 法 。 图 6.2 显示 了 相应 的 JSON 


轮 播 提示 板 应 用 程序 需要 使 


及 表现 优异 的 课程 ， 如 下 所 示 。 


用 基本 的 学 生 信息 ,例如 名 字 、 姓 氏 、 当 前 教育 水 平 ,，L 


。66 。 
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ental Toxicology 


<script 七 
$ (documen 


图 62 


ype="text/javascript"> 
t) .ready ( () =>{ 


$.getJSON('http://localhost:3000', (data)=>{ 
console.log("data on ", data); 


}) 
}) 
</script> 


上 述 代码 上 


- 段 使 用 了 jQuery 的 geUSONO 函 数 将 JSON 提要 置 入 文档 中 。 当 index.html 


文件 被 载 入 浏览 器 中 ， 学 生 的 JSON 对 象 数组 也 将 被 载 入 Console 窗口 中 。 接 下 来 ， 将 析 


取 JSON 对 象 : 


1 的 数据 ， 并 将 其 嵌入 DOM 中 。 对 此 ， 可 采用 jQuery 的 each0) 函 数 遍 历 学 


生 和 JSON 提要 ， 并 将 数据 加 载 至 当前 页 面 中 。 


jQuery 的 each0 函 数 类 似 于 服务 器 


迭代 循环 。 其 ! 
值 对 传递 至 回 j 


i 的 foreachO 和 迭代 循环 和 原生 JavaScript 的 for in0) 
1， 壕 代 器 each() 将 数据 作为 第 一 个 参数 ， 并 将 数据 中 的 各 项 作为 一 个 键 - 


赂 中。 这里， 回调 表示 为 一 个 执行 于 键 - 值 对 上 的 脚本 集合 。 在 该 回调 中 ， 


我 们 将 构建 一 个 HIML 文件 ， 而 该 文件 将 追加 到 DOM 上 的 div 元 素 上 。 针 对 学 生 JSON 
对 象 中 的 所 有 元 素 ， 我 们 将 使 用 这 一 回调 并 以 迭代 方式 构建 HTML 文件 ， 如 下 所 示 。 
<script type="text/javascript"> 
$ (document) .ready(() => { 


Let htmlContent = °° 3 
$.getJSON('http://localhost:3300', (data) => { 


$ .eac 
$.e. 


h(data, (key, value) => { 
ach (value, (index, student) => { 


htmlContent += “<div class="student"> ;7 
htmlContent += ‘<h3>${student.level} of the Month</h3> `: 
htmlContent += “<h4>$fstudent .firstname} 


$ 


{student.lastname}</h4> `: 


htmlContent += ‘<p>${student.class}</p>; 
htmlContent += “</div> 7 


Da 
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1D); 
$('#students') .html (htmlContent) 
}) 
Va 
</script> 
在 index.html 文件 中 ,我 们 采用 了 jQuery 中 的 each0 函 数 遍历 学 生 的 JSON 提要 并 构 
建 HTML 文件 ， 以 显示 学 生 信息 ， 例 如 名 字 、 姓 氏 、 入 学 年 份 和 所 选课 程 。 这 里 将 构建 
一 个 动态 HTML 并 将 其 赋予 当前 html 变量 中 。 相 应 地 ，html 变量 中 的 数据 将 于 稍 后 添加 
至 包含 学 生 ID 的 div 元 素 中 ， 如 下 所 示 。 
<body> 
<div id="students"></div> 
</body> 


图 6.3 显示 了 index.html 体 的 输出 结果 。 


Freshman of the Month 
John Doe 

Environmental Toxicology 
Senior of the Month 
Jane Dane 


Economics 


expert of the Month 


Scott tiger 


Physics 


图 6.3 


当 脚 本 被 载 入 Web 浏览 器 后 ， 脚 本 将 检测 当前 文档 是 否 处 于 就 绪 状 态 。 若是 ， 将 向 
服务 器 生成 一 个 AJAX 调用 ， 进而 检索 JSON 数据 。 在 JSON 检索 完毕 后 ， 学 生 JSON 对 
象 数组 中 的 每 个 对 象 将 被 传递 至 回调 中 ， 并 生成 一 个 包含 学 生 课 程 的 HIML div 元 素 。 这 
一 过 程 持续 进行 ， 直 至 回调 运行 于 最 后 一 个 元 素 。 此 时 ，HTML 文件 将 被 追加 至 HTML 
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中 的 div 元 素 上 (包含 一 名 学 生 的 人 D)。 
关于 HTML 追加 于 htmlContent 变量 上 ， 这 里 可 稍 作 更 改 ， 如 下 所 示 。 


$.each(data, (index, student)=>{ 
htmlContent+=“<div class="student"> 
<h3>${student.level} of the Month</h3> 
<h4>${student.firstname} ${student.lastname}</h4> 
<p>${student .class}</p> 
</div> 7 
Hs 


与 之 前 的 脚本 相 比 ， 此 处 并 未 针对 每 个 HTML 语句 执行 追加 操作 ， 而 是 利用 反 引 号 
或 反 色 号 键 〈`) 执行 添加 操作 并 执行 单一 操作 ， 这 可 视 作 是 一 种 优化 行为 。 接 下 来 将 利 
用 jQuery Cycle 添加 幻灯 片 显示 功能 ， 稍 后 将 对 此 加 以 讨论 。 

前 述 内 容 使 得 Web 页 面 可 将 全 部 学 生 数 据 加 载 至 HTML 文件 中 ， 下 面 将 利用 这 些 数 
据 构 建 Carousel 应 用 程序 。 这 里 将 使 用 jQuery Cycle 插件 在 通知 板 应 用 程序 上 旋转 学 生 信 
息 。 jQuery Cycle 幻灯 片 插件 支持 多 种 浏览 器 上 的 各 种 渐变 效果 ,例如 褪色 、 展 开 、 擦 除 、 
缩放 、 深 动 和 混 洗 等 效果 。 此 外 ， 该 插件 还 支持 暂停 、 单 击 触发 器 和 响应 回调 等 特性 。 

出 于 简单 考量 ， 当 前 Carousel 示例 程序 仅 支 持 某 些 基本 操作 ， 例 如 褪色 、 旋 转 以 及 基 
于 鼠标 悬 停 的 暂停 功能 ， 以 使 轮 播 提示 板 应 用 程序 处 于 暂停 状态 , 进而 显示 当前 学 生 的 信 
息 。 最 后 ， 我 们 还 将 设置 速度 和 超时 值 ， 这 将 确定 学 生 间 的 渐变 时 间 ， 如 下 所 示 。 

<script type="text/javascript"> 

$ (document) .ready(() => { 

let htmlContent = `*» 
$.getJSON('http://localhost:3300', (data) => { 
console.log("data", data); 
$.each(data, (index, student) => { 
htmlContent += ‘<div class="student"> 
<div class="col-1g-12 text-center"> 
<h3>${student.level} of the Month</h3> 


<h4 class="lead">${student.firstname} ${student.lastname}</h4> 


<p>${student.class}</p> 
</div> 
> 
1D); 
$('#students') .html (htmlContent); 


$('#students') .cycle({ 
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"cleartypeNoBg": true, 
dt odd Ss 
Wd 7 a 
"prev": "#prev", 
"next": "#next", 
"Speed" : 500, 
"timeout": 10000 
}) 
}) 
}) 
</script> 
上 述 代 码 片 段 设置 了 循环 插件 ， 并 将 其 添加 至 学 生 的 div 元 素 中 。 该 循环 插件 作为 参 
数 接收 一 个 JSON 对 象 ， 并 将 旋转 器 功能 加 入 div 元 素 中 。 在 该 JSON 对 象 中 ， 我 们 添加 
了 4 个 属性 ， 即 低 、pause、speed 和 timeout。 其 中 ， 低 确定 了 在 HTML 元 素 上 执行 的 效 
果 ; fade 则 是 Cycle 插件 的 另 一 种 显著 效果 ; jQuery Cycle 插件 所 支持 的 其 他 效果 还 包括 
shufftle、zoom、turmdown、scrollRight 和 curtainX。 第 二 个 所 采用 的 属性 是 pause， 当 用 户 
悬 停 于 旋转 器 元 素 上 时 ， 用 于 确定 是 否 终止 旋转 行为 。 相 应 地 ， 该 属性 接收 一 个 tme 或 
false(0 或 1 )， 进 而 确定 是 否 暂停 旋转 行为 。 接 下 来 的 两 个 属性 分 别 是 speed 和 timeout， 
用 于 确定 旋转 的 速度 以 及 当 次 显示 时 间 。 当 包含 更 新 后 的 脚本 的 Web 页 面 载 入 浏览 器 中 
时 ， 全 部 学 生 对 象 将 被 解析 至 一 个 局 部 JavaScript 字符 串 变 量 中 并 被 追加 至 DOM 中 。 另 
外 ， 仅 旋转 器 对 象 中 的 第 一 个 元 素 将 被 显示 ， 其 他 元 素 将 处 于 隐藏 状态 。 该 功能 由 Cycle 
插件 在 后 台 进行 处 理 。 图 6.4 显示 了 上 述 示例 代码 生成 的 Carousel 程序 结果 。 


Freshman of the Month 


John Doe 


Environmental Toxicology 


图 6.4 


下 面 将 进一步 丰富 页 面 的 用 户 体验 ， 即 添加 一 个 处 理 程序 和 一 个 用 户 自 定义 控制 器 ， 
以 处 理 旋转 功能 ， 如 下 所 示 。 
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<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="jquery.cycle.js"></script>\ 
<script type="text/javascript"> 
$ (document) .ready (()=>{ 
let htmlContent = 7 
$.getJSON('http://localhost:3300', (data)=>{ 
console.log("data", data); 
$.each (data, (index, student)=>{ 
htmlContent+=“<div class="student"> 
<h3>${student.level} of the Month</h3> 7 
htmlContent +=`<h4>$fstudent .firstname} $fstudent.1astnamej</h4> `; 
htmlContent+=`<p>$fstudent.class}j</pP> `; 
htmlContent+= `</div> 
]) 7 
$('#students') .html (htmlContent); 
$('#students') .cycle({ 
"cleartypeNoBg": true, 
-den 
"pausen: "1", 
"prev": "#prev", 
"next": "#next", 
"speed": 500, 
"timeout": 10000 
和 
}) 
Fy 
</script> 
</head> 


" id="prev">Prev</a> 
<a href="#" id="next">Next</a> 
<div id="students"></div> 

</body> 

</html> 


在 上 述 代 码 片段 中 ,我 们 加 入 了 两 个 锚 元 素 , 对 应 ID 值 分 别 为 prev 和 next, 并 在 cycle 
对 象 中 被 引用 。 

cycle 对 象 中 加 入 了 两 个 名 为 prev 和 next 的 新 属性 ， 对 应 值 表示 为 DOM 上 的 元 素 的 
HTML ID 属性 
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图 6.5 中 的 Prev 和 Next 链接 将 处 理 通知 板 的 旋转 行为 。 


Prev Next 


expert of the Month 


Scott tiger 


Physics 


图 6.5 
上 述 内 容 是 一 种 快速 构建 由 jQuery 和 JSON 支持 的 Carousel 应 用 程序 的 方法 。 此 外 ， 
该 示例 还 可 用 于 构建 更 复杂 的 Carousel 应 用 程序 ， 同 时 分 别 包含 用 于 照片 库 和 视频 库 
Carousel 应 用 程序 的 图 像 和 视频 内 容 。 


6.3 Bootstrap 简介 


目前 ，Carousel 应 用 程序 工作 正常 ， 唯 一 的 不 足 之 处 是 应 用 程序 看 起 来 过 于 “简陋 ”。 
针对 这 一 问题 ， 借 助 于 Bootstrap， 可 进一步 丰富 应 用 程序 的 观感 。 
“Bootstrap 是 一 个 免费 的 开源 前 端 Web 框架 ， 用 于 设计 网 站 和 Web 应 用 程序 ”。 
一 一 en.wWikipedia.org 
完成 应 用 程序 设计 或 GUI 部 分 所 需 的 所 有 UI 组 件 ， 如 选项 卡 、 模 式 、 列 表 等 ， 都 已 
经 包含 在 Bootstrap 中 。 据 此 ， 开 发 人 员 可 调整 某 些 元 素 、 修 改 CSS 属性 ， 进 而 构建 自 定 
义 元 素 。 接 下 来 将 在 Carousel 应 用 程序 中 实现 Bootstrap。 


6.3.1 设置 Bootstrap 


Bootstrap 提供 了 一 种 较为 简单 的 方式 设置 应 用 程序 库 。 类 似 于 其 他 第 三 方 库 ， 我 们 
可 直接 提供 一 个 内 容 分 发 网 络 (Content Delivery Network，CDN), 或 者 下 载 对 应 的 文件 。 
Bootstrap 针对 用 户 界面 交互 和 事件 也 包含 了 JavaScript 链接 ， 但 在 当前 应 用 程序 中 ， 
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我 们 仅 需 要 使 用 CSS。 
以 下 链接 需要 置 于 head 标签 中 。 
<link rel="stylesheet" type="text/css" href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/ 
bootstrap.min.css"> 


我 们 通过 上 述 链接 下 载 应 用 程序 的 CSS 文件 ， 这 样 ， 即 使 用 户 处 于 离线 状态 ， 或 者 


在 缺少 互联 网 的 情况 下 也 可 对 此 加 以 引用 。 


待 下 载 完毕 后 ， 对 应 文件 名 为 bootstrap.min.css， 并 存储 于 相应 的 应 用 程序 目录 


这 将 链接 至 HTML 文件， 如 下 所 示 。 


<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 


当 检 测 上 述 CSS 文件 是 否 被 成 功 链接 时 ， 需 要 在 浏览 器 中 加 载 当前 应 用 程序 。 图 6.6 


显示 了 成 功 的 Bootstrap 样式 表 链 接 。 
rev Next 
expert of the Month 


Scott tiger 
Physics 


民 遇 Bements Console Sources Network Periormance Memory Application 六 Se 
OO mT | Vew :TO Groupbyframe Presevelog @ Disable cache Offine Online 


Fiter | 日 Hide data URLs 团 xHR JS css Ime Media Font Doc WS Manifest Other 


20ms ms 50 ms Boms 1o0 ms 


Name Status Type 


index.html 
<> 


/Usera/bruno/D. Fished docu... 


| bootstrap.min.css 


Finist 
| /vsersbruno/D... Mshed syes- 


图 6.6 


其 中 ,Status 选项 卡 中 包含 了 一 个 Finished 状态 , 这 意味 着 ，CSS 文件 已 被 成 功 载 入 。 


下 一 步 是 实现 某 些 布局 样式 。 
6.3.2 Bootstrap 响应 性 和 样式 


下 列 各 项 步骤 将 引领 我 们 实现 应 用 程序 的 样式 化 。 此 处 首先 讨论 布局 元 素 , 随后 将 重 


点 讨论 某 些 特定 元 素 。 
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(1) 当 添 加 布局 样式 时 ， 需 要 设置 一 个 名 为 container 的 魔术 类 。 该 类 可 针对 每 种 设 
备 处理 Web 应 用 程序 的 布局 问题 ， 并 应 添加 至 所 有 元 素 的 父 元 素 中 。 具 体 来 说 ， 当 前 正 
在 构建 的 应 用 程序 在 body 元 素 之 后 有 一 个 div 元 素 ， 这 是 所 有 Carousel 元 素 的 父 元 素 ， 


如 下 所 示 。 


<div id="students" class="container"></div> 


八 最 好 不 要 将 body 元 素 包含 在 容器 中 。 稍 后 ， 它 可 能 会 对 设计 更 多 的 父 块 造成 限制 。 
在 添加 了 container 类 后 ， 可 得 到 如 图 6.7 所 示 的 结果 。 


Freshman of the Month 
John Doe 


Environmental Toxicology 


民 遇 | Elements Console Sources Network Performance Memory Application » 


id Styles Computed Event Listeners » 
> <head>..</head> Fiter :hov cls +, 
v <body> 
elenent. style 
a href="#" id="prev">Prev</a> eae a 
a href="e id="next">Next</a> Dlgdths 260172px) 
~ Pdiv id students” class™ container style™ position: viletei 
relative, width; 280.1720x, height; 117px, = /div 一 站 Ee Tp 
enedia (min-width: 576px) 
"Container { 
max-width; 549pxi 


图 6.7 


(2) 在 应 用 了 container 之 后 ， 还 需要 实现 Bootstrap 的 网 格 系统 。Bootstrap 网 格 系统 
公 闻 | 


一 个 单行 类 和 多 个 列 类 组 成 。 其 中 ， 列 进一步 划分 为 12 个 子 列 。 在 当前 示例 中 ， 全 间 
内 容 将 添加 至 1 行 、1 列 中 。 由 于 内 部 内 容 是 在 父 div 中 动态 加 载 的 ， 因 而 需要 在 jQuery 
的 每 个 循环 回调 中 进行 更 改 ， 如 下 所 示 。 
$.each(data, (index, student) => { 
htmlContent += ‘<div class="student"> 
<div class="col-1g-12 text-center"> 
<h3>${student.level} of the Month</h3> 
<h4 class="lead">$ {student.firstname} 
${student.lastname}</h4> 
<p>${student .class}</p> 
</div> 
</div> 7 
DD); 
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图 6.8 显示 了 生成 的 结果 。 


Freshman of the Month 
John Doe 


Environmental Toxicology 


图 6.8 


(3) 目前 ， 布 局 效果 看 起 来 较为 传统 ， 接 下 来 将 关注 单个 元 素 ， 并 为 以 下 元 素 提供 
Bootstrap 体验 。 

口 导航 按钮 。 

口 Bootstrap 文本 。 

综 上 所 述 ， 最 终 的 HTML 模板 如 下 所 示 。 


<!DOCTYPE html> 
<html> 


<head> 
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="jquery.cycle.js"></script> 
<script type="text/javascript"> 
$ (document) .ready(() => { 
let htmlContent = 人: 
$.getJsSON('http://localhost:3300', (data) => { 
console.log("data", data); 
$.each (data, (index, student) => { 
htmlContent += ‘<div class="student"> 
<div class="col-1g-12 text-center"> 
<h3>${student.level} of the Month</h3> 
<h4 class="lead">${student.firstname} ${student.]lastname}</h4> 
<p>${student.class}</p> 
</div> 
< 
2 
$('#students') .html (htmlContent); 
$('#students') .cycle({ 
"cleartypeNoBg": true, 
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6.9 显示 了 修改 后 的 模板 内 容 。 


expert of the Month 
Scotttiger 


Physics 


图 6.9 
至 此 ，Carousel 应 用 程序 将 暂 告 一 段落 。 我 们 的 JSON 之 旅 实 现 了 前 端 应 用 程序 。 在 
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后 续 章 节 中 ， 还 将 进一步 探讨 服务 器 端 和 客户 端 上 JSON 数据 的 奉 代 方案 。 


6.4 本 章 小 结 


本 章 整合 了 JavaScript、jQuery 和 JSON， 并 构建 了 一 个 简单 的 Carousel 提示 板 应 用 
程序 。 其 间 我 们 逐步 完成 了 以 下 各 项 步骤 : 摄取 数据 提要 、 从 该 数据 提要 动态 构建 一 个 模 
板 、 将 数据 提要 追加 到 div 元 素 ， 然 后 将 div 元 素 绑 定 到 cycle 插件 。 从 通知 板 旋转 器 应 
程序 中 可 以 看 到 ， 即 使 较 大 的 Carousel 项 目 也 只 需 较 少 的 工作 即 可 完成 。 最 后 ， 本 章 还 
通过 Bootstrap 对 应 用 程序 进行 了 修正 , 同时 学 习 了 如 何在 应 用 程序 中 实现 不 同 的 UI 构造 
模块 。 第 7 章 将 讨论 JSON 的 替代 实现 方案 。 


第 7 章 JSON 的 替代 方案 


截止 到 目前 , 我 们 仅 将 JSON 用 作 一 种 HTTP 数据 交换 格式 ， 本 章 将 考查 一 些 较为 流 
行 的 百代 方法 。 最 近 几 年 来 , 在 编程 和 脚本 语言 中 ,软件 模块 和 数据 包 的 数量 都 在 急剧 增 
长 。 本 章 主 要 涉及 以 下 JSON 实现 。 

口 PHP 和 Nodejs 中 的 依赖 关系 管理 。 

口 用 于 在 PHP 和 Angular 中 存储 应 用 程序 配置 的 JSON。 

口 Angular 中 的 应 用 程序 元 数据 。 

口 Nodejs 中 的 常量 。 

口 针对 嵌入 式 模 板 或 服务 器 端 显示 的 JSON 元 数据 应 用 。 

诸如 PHP 或 JavaScript 这 一 类 脚本 语言 涵盖 了 大 量 的 软件 包 和 模块 。 这 一 类 预先 构建 
的 软件 包 其 优点 主要 体现 在 ， 它 们 提供 了 一 些 即 用 功能 ， 并 且 经 过 了 社区 的 大 量 测试 。 另 
外 ， 当 在 软件 项 目 中 引入 单一 框架 或 多 个 框架 时 , 还 需要 了 解 如 何 将 这 些 框架 加 载 到 项 目 
中 ， 如何 从 当前 项 目的 不 同 部 分 访问 它们 ,这些 框架 是 否 存 在 依赖 关系 ， 以 及 它们 如 何 影 
响 整 个 项 目 。 这 一 类 问题 可 通过 依赖 关系 管理 器 加 以 解决 。 


7.1 依赖 关系 管理 


依赖 关系 管理 器 是 一 种 软件 程序 , 它 跟 踪 程 序 运行 所 需 的 所 有 基本 程序 。 软 件 开发 生 
命 周 期 中 常见 的 实践 是 利用 单元 测试 框架 执行 单元 测试 ; 反 过 来 ,单元 测试 框架 也 需要 使 
月 一 些 基础 库 ， 或 者 通过 某 些 配 置 启用 框架 的 应 用 。 
上 述 操作 的 常见 处 理 方式 是 编写 快速 的 脚本 。 但 随 着 项 目的 不 断 扩展 , 依赖 关系 也 随 
之 增长 。 同样 ,跟踪 这 些 变 化 ， 并 确保 在 项 目 上 工作 的 不 同 团队 获得 相关 更 新 (由 脚本 完 
成 ) 将 变 为 一 项 艰巨 的 任务 。 通 过 引入 依赖 关系 管理 器 ， 可 确保 整合 过 程 的 自动 化 处 理 ， 
在 增加 了 一 致 性 的 同时 还 可 节省 大 量 的 时 间 。 


7.1.1 在 PHP 中 使 用 composerjson 


依赖 关系 的 管理 过 程 相 对 复杂 ,对 于 刚 开 始 向 项 目 中 添加 新 框架 、 设 置 项 目 并 使 其 运 
行 的 新 晋 开 发 人 员 来 说 ， 这 是 一 项 艰巨 的 任务 。 依 赖 项 管理 器 〈 例 如 PHP 的 Composer) 
可 以 解决 这 个 问题 。 它 被 认为 是 “所 有 项 目 之 间 的 黏合 剂 ” 这 是 有 原因 的 。Composer 使 
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日 JSON 跟踪 既定 项 目的 全 部 依赖 关系 。Composer 的 主要 工作 是 从 远程 位 置 下 载 库 ， 并 
采用 本 地 方式 对 其 进行 存储 。 当 告知 Composer 我 们 需要 哪些 库 时 ， 可 配置 composerjson 
文件 。 该 文件 记录 了 所 有 的 库 、 版 本 以 及 库 的 部 署 环境 。 例如， 单元 测试 框架 库 不 可 应 用 
于 生产 环境 中 。 假设 某 人 正在 对 产品 实例 进行 随机 测试 , 但 通过 运行 单元 测试 删除 了 整个 
用 户 列表 。 对 此 ， 必 须 从 之 前 的 数据 库 备 份 中 恢复 整个 用 户 表 。 

图 7.1 显示 了 如 何 利用 JSON 处 理 依赖 关系 管理 。 


"require”" 
"php" 


"require- 


"phpuni 
} 


图 7.1 


在 composerjson 文件 中 ， 我 们 加 入 了 两 项 内 容 ， 进 而 安装 PHP 和 PHPUnit 的 特定 版 
本 。 当 该 文件 被 添加 至 当前 项 目 后 , 即 可 采用 Composer 的 install 命令 安装 这 些 依赖 关系 。 
此 外 ，Composer 还 包含 了 一 个 update 命令 ， 并 关注 相关 数据 包 的 更 新 状态 。 


0 关于 Composer 的 更 多 信息 ， 读 者 可 访问 http://www.getcomposer.org 


7.1.2 基于 package.json 的 Node.js 


Nodejs 是 一 个 流行 的 软件 平台 ， 并 采用 JSON tt Node 包 管理 
器 (Node Packaged Modules，NPM) 可 供 开发 人 员 将 外 部 模块 安装 、 集 成 至 其 代码 中 。 
对 于 每 个 Nodejs 项 目 ， 在 根 文档 中 存在 一 个 packagejson 文件 ， 并 可 跟踪 所 有 的 元 数据 ， 
例如 项 目 名 称 、 作 者 名 称 、 版 本 号 、 运 行 项 目 所 需 的 模块 ， 以 及 运行 项 目 所 需 的 底层 守护 
进程 或 引擎 。 图 7.2 显示 了 Nodejs 项 目 中 的 一 个 package.json 示例 文件 。 

package.json 文件 是 一 个 较 大 的 JSON 对 象 ， 用 于 跟踪 元 数据 ， 例 如 项 目 名 称 、 作 者 
的 详细 信息 以 及 所 需 的 模块 。 


@ 关于 NPM 的 更 多 信息 ， 读 者 可 访问 https://www.npmjs.org 
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图 7.2 


7.2 存储 应 用 程序 配置 的 JSON 


在 JSON 之 前 ， 配 置 内 容 一 般 存储 于 文本 文件 或 特定 的 语言 文件 中 ， 例 如 config.php 
(PHP 语言 )、config.py (Python 语言 ) 或 configjs (JavaScript 语言 )。 所 有 这 些 文件 均 可 
被 与 语言 无 关 的 config.json 文件 加 以 替换 ， 同 时 针对 非 JavaScript 库 采 用 JSON 库 对 其 进 
行 解析 。 

7.2.1 PHP 和 Python 中 的 配置 

图 7.3 显示 了 config.json 文件 。 

在 configjson 文件 中 ， 元 数据 存储 为 JSON 对 象 。 这 里 ， 我 们 可 指定 一 些 较为 重要 的 
信息 ， 例 如 项 目 名 称 、 项 目 环境 (根据 文件 所 处 的 服务 器 而 变化 )、 需 要 在 应 用 程序 引导 
过 程 中 自动 加 载 的 类 ， 以 及 需要 排除 的 类 或 文件 夹 。 最 后 ， 通 过 RECURSIVE 键 , 还 可 进 

- 步 指定 空 文件 夹 和 包含 文件 的 文件 夹 。 
@ 引导 是 指 应 用 程序 的 启动 过 程 , 其 间 , 应 用 程序 将 处 于 就 绪 状 态 并 实现 其 相应 的 


当 config json 文件 配置 完毕 后 ， 可 在 Python 中 使 用 json.loads() 方 法 ， 或 者 在 PHP 中 
使 用 json_decode() 方 法 ， 进 而 解析 config 对 象 以 检索 数据 。 此 外 ，JSON 对 象 还 可 用 于 存 
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] ， 
"EXCLUDE”: 


]， 
"RECURST\ 


图 7.3 


储 元 数据 模式 ， 若 团队 中 的 某 位 成 员 修改 了 数据 库 ,， 这 将 有 助 于 其 他 成 员 更 新 其 数据 库 模 
式 。 对 此 ， 一 种 较为 明智 的 作法 是 在 schema.json 文件 中 编写 一 个 触发 器 ， 如 果 该 文件 被 
更 新 ， 则 数据 库 中 的 对 应 模式 也 需要 被 更 新 ， 并 通过 数据 库 迁 移 脚 本 反映 新 的 更 改 内 容 。 
图 7.4 显示 了 schema.json 文件 。 


ize" ， 
primaryke 


required" : 
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在 schema.json 示例 中 ， 我 们 构建 了 一 个 JSON 模式 对 象 ， 以 存储 数据 库 模 式 信息 。 
其 中 ，client 表示 为 当前 模式 中 的 表 名 。client 表 包含 了 3 列 ， 分 别 是 ID、 名 称 和 客户 状 
态 。 也 就 是 说 ， 对 应 客户 处 于 启用 状态 或 禁用 状态 。 另 外 ,每 列 中 包含 了 提供 模式 信息 的 
JSON 列 对 象 ， 例 如 数据 类 型 、 列 大 小 ， 以 及 是 否 包含 默认 值 或 主键 约束 条 件 。 


7.2.2 在 Angular 5 中 进行 配置 


最 新 的 Angular 框架 是 一 个 前 端 开发 工具 集 ; 除 此 之 外 ， 还 利用 客户 端的 各 种 测试 库 
提供 了 端 到 端的 测试 环境 。Angular 5 之 前 称 作 angularjs， 作 为 一 个 JavaScript 库 ， 它 主要 
针对 基于 浏览 器 的 单 页 应 用 程序 提供 了 模型 -视图 -控制 器 架构 。 目 前 ，Angular 通过 谷歌 
予以 维护 。 

人 在 最 新 的 Angular ( 版 本 2 以 上 ) 中 ,我 们 将 采用 TypeScript 作为 基本 的 开发 肢 
本 语言 。 根 据 TypeScript 文档 中 描述 ，TypeScript 通过 类 型 严格 的 特性 扩展 了 JavaScript， 
并 向 代码 中 添加 了 更 多 的 语法 糖 。 此 外 ， 对 于 部 署 和 浏览 器 的 使 用 来 说 ,还 可 以 将 代码 转 
换 为 纯 JavaScript。 转 换 过 程 将 把 TypeScript 编译 为 JavaScript 


为 了 进一步 理解 Angular 中 的 配置 特性 ， 需 要 在 机 器 中 配置 该 框架 。 这 里 ， 建 议 读者 
遵循 以 下 链接 中 提供 的 各 项 步骤 配置 Angular 框架 : https:/angulario/guide/quickstart# 
devenv。 

最 终 ， 对 应 结果 如 图 7.5 所 示 。 


{} .angular-clijson 


editorconfig 


.gitignore 


protractor.conf.js 
README.md 
{} tsconfig.json 


{} tslint.json 


图 75 
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my-app 的 上 述 结构 是 通过 Microsoft 的 vscode 编辑 器 实现 项 目 化 结构 的 。 对 此 , 读者 
可 访问 https://code.visualstudio.com/ 以 了 解 更 多 信息 。 

所 有 JSON 文件 都 是 在 Angular 中 构建 应 用 程序 所 需 的 配置 文件 ， 下 面 将 对 此 进行 逐 
一 讨论 。 

1. 基于 tslintjson 的 linting 


linting 是 检查 、 调 试 代码 语法 和 样式 的 过 程 ， 这 对 于 代码 的 维护 和 可 读 性 来 说 十 分 重 
另外 ， 还 可 以 消除 一 些 未 来 可 能 导致 bug 的 错误 。tslintjson 利用 JSON 规范 
结 人 发 人 员 编写 特定 的 项 目 规则 。 读 者 可 能 已 经 注意 到 ，linting 配置 与 TypeScript 
相关 一 一 此 处 前 绷 为 ts。 
以 下 示例 展示 了 tslintjson 文件 中 my-app 的 一 些 linting 规则 , 其 内 容 具 有 自 解释 特征 。 
另外 ， 读 者 还 可 参考 代码 中 的 注释 内 容 以 对 其 进一步 了 解 。 
| 
Pleses 
{ 
//short hand arrow return: getData( (someVariable)=>someVariable) 
"arrow-return-shorthand": true, 
//Indentation of spaces allowed 
"indent": [ 
true, 
"spaces" 


’ 
//Semicolon after every end of statement neccessary 
"semicolon": [ 

true, 

"always" 


’ 
//Conditional operator used for type match: allowed 
"triple-equals": [ 

true, 

"allow-null-check" 


2. 利用 tsconfig.json 配置 TypeScript 


tsconfig 也 称 作 TypeScript 项 目的 根 文 件 ， 负 责 初始 化 TypeScript 项 目 ， 并 在 编译 ts 
时 使 用 特定 的 配置 规则 。 下 面 考查 一 些 较为 重要 的 规则 及 其 具体 含义 。 
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{ 
//On saving the ts file, compile the ts to js 
"compileonSave": true, 
"compilerOptions": { 
//Targeting option for ecmascript versions 
waget onde 
//Library files that need to be included for target 
at A 
nag20L i 
"dom" 


} 

全 局 tsconfig 文件 使 用 特定 源 目录 的 tsconfig.json 中 的 extend 属性 实现 继承 。 

关于 键 及 其 应 用 ， 读 者 可 访问 http://json.schemastore.org/tsconfig 以 了 解 更 多 信息 。 

3. 使 用 package.json 和 package-lock.json 文件 

前 述 内 容 曾 介绍 了 package.json,， 它 主要 用 于 维护 与 应 用 程序 相关 的 信息 , 例如 名 称 、 
作者 、 测 试 脚本 等 ， 并 管理 产品 和 开发 级 别 所 需 的 依赖 模块 。 最近，NPM 发 布 了 新 的 功 
能 ， 并 在 数据 包 更 新 或 安装 过 程 中 生成 package-lock.json 文件 。 

图 7.6 显示 了 package-lock.json 文件 。 


1 package-lock.json x 
{ 


图 7.6 
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package-lock.json 文件 可 指定 基于 时 


应 用 程序 中 的 每 个 节点 模块 ， 以 检 
了 模块 的 树 形 结构 ， 并 在 节点 模块 


4. 使 用 angular-clijson 文件 


查 其 依赖 性 信息 。 此 外 ，package-lock.json 文件 还 
过 程 中 质 


间 更 新 的 、 所 有 的 数据 包 记录 ， 且 不 必 逐 个 访问 
是 供 
是 供 了 性 能 方面 的 优势。 


gg 多 项 功能 提供 了 命令 行 界面 cli )， 例 如 应 用 程序 启动 、 部 署 或 
创建 组 件 。 相 应 地 ， 用 于 执行 此 类 任务 的 命令 一 般 采 用 ng 命令 前 级 。 例 如 ，ng serve 命 
令 负 责编 译 代码 ， 并 通过 webpack 同步 监视 文件 更 改 。 


@@ webpack 是 一 个 开源 工具 ， 并 本 


可 访问 https://webpack. js.org/ 以 了 解 更 多 


在 应 用 程序 级 别 上 执行 的 全 部 操 
示 了 安装 过 程 中 提供 的 默认 配置 信息 。 


{} .angular-clijson x 


wpotyfitts 
a 

"tsconfig" 
len 


"scripts”: [], 


[针对 JavaScript 应 用 程序 生成 特定 的 环境 ， 读 者 
信息 


: 均 可 在 angular-clijson 文件 中 进行 配置 。 图 7.7 显 


"environmentSource": “en' 


”environment 
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需要 注意 的 是 ,angular-clijson 中 的 apps 键 由 一 个 数组 构成 ,这 意味 着 ,可 加 Angular 
框架 中 多 个 数据 源 的 多 个 App。 下 面 利 用 ng serve --app， 或 简单 地 采用 ng serve 运行 应 用 


旺 序 ， 进 而 对 设置 项 进行 测试 ， 对 应 输出 结果 如 图 7.8 所 示 。 


Last login: Wed Apr 11 17:14:12 on ttys010 
brunos-MacBook-Pro:my-app bruno$ ng serve --app 0 
*# NG Live Devel erve tening 


te; 2918-64-11T16:37:16.281Z 
fd7734d6628b38a52717 

Time: 9010ms 
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [r 
chunk {main} main.bund main.bundle.js.map (main) 6.03 kB {vendor} [initial] [rendered] 
chunk {polyfills} polyfi , e.js.map (polyfills) 199 kB finline} [initial] [renl 
dered] 
chunk {style d map (styles) 11.3 kB finline} [ ] [rendered] 
chunk {vendor} ) .js-mop (vendor) 2.29 MB [initiol] [ ed] 


webpack: Compiled successfully. 


图 7.8 


图 7.8 中 的 输出 结果 表明 代码 被 成 功 编译 。 
通过 运行 ng built 命令 ， 将 使 用 预先 (Ahead of Time，AOT) 编译 器 编译 代码 ， 并 创 
建 应 用 程序 的 部 署 构 建 ， 考 查 如 图 7.9 所 示 的 结果 。 


» cart-app2 
4 my-app 
b .vscode 
dist 
e2e 
node_modules 


src 


{} .angular-clijson 


.editorconfig 


.gitignore 


图 7.9 


注意 ， 在 处 理 过 程 完毕 后 ， 将 生成 一 个 dist 目录 ， 表 示 转 换 为 JavaScript 的 可 部 署 代 
。 相 关 原 因 可 描述 为 : 如果 修 s angular-clijson 文件 (关键 数据 "outDir": "dist" 变 为 
"outDir": "distribution")， 那 么 还 会 将 构造 目录 名 修改 为 distribution。 
这 也 是 新 Angular 的 突出 特性 之 -, 它 充分 利用 了 JSON 的 可 配置 特性 。 关于 Angular 
配置 中 其 他 键 工作 方式 的 更 多 细节 ，Angular 背后 的 团队 已 经 以 事例 的 形式 汇总 了 CLI 模 
块 文档 。 读 者 可 访问 https://github.com/angular/angular-cli/wiki/stories 以 了 解 更 多 信 息 。 


瘟 
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7.3 ”存储 应 用 程序 元 数据 的 


JSON 


在 依赖 管理 器 中 ，JSON 还 可 用 于 存储 软件 项 目的 元 数据 。 那 么 ， 元 数据 与 之 前 解释 
的 应 用 程序 配置 有 何不 同 ? 元 数据 有 别 于 以 下 事实 : 配置 是 应 用 程序 正常 工作 所 需 的 一 组 
定制 的 设置 项 。 因此 ,可 以 将 配置 数据 称 为 元 数据 的 一 种 类 型 或 子 集 。 为 了 在 整体 上 理解 


这 一 概念 ， 下 面 考 查 JSON 作为 元 数据 的 不 同 实现 。 
7.3.1 Angular 5 中 的 元 数据 


在 Angular 中 ， 元 数据 是 在 处 理 某 个 特定 功能 的 类 时 加 以 使 用 的 。 元 数据 对 类 进行 配 
置 ， 以 便 将 其 用 作 组 件 或 服务 。 另 外 ， 元 数据 是 通过 类 装饰 器 或 属性 元 数据 实现 的 。 稍 后 


将 学 习 类 装饰 器 ， 因 为 它 适 用 于 JSON 基本 上 下 文 。 


在 Angular (版 本 2 以 上 ) 中， 首先 需要 讨论 的 是 NgModule。 
“NgModule 是 一 个 带 有 (@NgModule 装饰 器 函数 的 类 ， 它 接受 一 个 元 数据 对 象 ， 并 通 


知 Angular 如 何 编译 代码 ”。 


一 一 angulario 


每 个 类 可 以 附带 一 个 装饰 器 。 对 于 NgModule， 对 应 类 已 经 在 Angular 核心 库 中 加 以 
定义 。 我 们 需要 使 用 NgModule 类 的 装饰 器 识别 所 有 组 件 、 供 应 者 〈 也 称 作 服务 )， 以 及 


开发 人 员 创建 的 或 Angular Core 导入 的 模块 。 
接 下 来 考查 以 下 源 自 app.modules.ts 文件 中 的 代码 。 


@NgModule ({ 
imports: [ 
BrowserModule 
]， 
declarations: [ 
AppComponent 
Ys 

providers: [], 
bootstrap: [ 
AppComponent 
] 

}) 


在 上 述 代 码 中 , NgModule 类 可 以 像 函 数 一 样 调用 , 并 使 


用 JavaScript 对 象 作为 参数 。 


注意 ， 对 此 需要 通过 注解 操作 符 “@” 向 NgModule 关键 字 添 加 前 级 ， 即 装饰 器 的 语法 
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声明 。 
一 个 稍 显 复杂 的 例子 是 Angular Core 中 的 Component 类 .在 app.component'ts 文件 中 ， 
包含 了 以 下 代码 片段 。 
Qcomponent ({ 
selector: "app-Ioot'v 
templateUrl: './app.component .html'， 
styleUrls: ['./app.component.css'] 
Ee class AppComponent { 
title = 'app'; 
} 
这 里 使 用 了 @Component 装饰 器 装饰 AppComponent 类 。 这 意味 着 自 定义 类 
AppComponent 绑 定 到 @Component 装饰 器 。 组 件 元 数据 用 于 指定 以 下 内 容 。 
口 selector 组 件 的 名 称 ， 用 作 一 个 HIML 标签 加 载 特定 的 组 件 。 
口 ”需要 加 载 到 selector 标签 附近 的 模板 。 
口 CSS 或 样式 表 文 件 。 
注意 , 元 数据 并 非 总 是 可 选 的 , 它 也 可 以 是 强制 性 的 。 在 前 面 的 例子 中 , 对 于 Component 
类 来 说 ， 传 递 一 个 选择 器 并 指定 一 个 模板 是 Angular 在 UI 中 加 载 组 件 所 必需 的 。 
这 也 是 JSON 元 数据 这 一 概念 在 Angular 框架 中 的 实现 方式 。 接 下 来 将 考查 Nodejs。 
前 述 内 容 简要 介绍 了 的 Node.js 以 及 package.json 的 含义 , 下 面 将 在 Nodejs 应 用 程序 中 使 
常量 JSON 数据 ， 并 通过 常量 构建 一 个 简单 的 Nodejs 示例 服务 器 。 


7.3.2 Node.js 中 的 常量 


在 Nodejs 中 ， 可 将 元 数据 定义 为 常量 ， 并 在 模块 间 的 应 用 程序 中 对 其 加 以 使 用 。 下 
列 代码 片段 用 于 启用 Nodejs 中 的 基础 服务 器 。 


const http = require('http'); 
const constants = require('./constants'); 
const port = constants.port; 
http .createServer ( (req， res) => { 
res.end(`Hello $fconstants .audience} 、) 7 
}) .listen (port) 7 
console.log(‘Node Server is running on port: ${port}.) 


前 述 章节 中 曾 讨论 了 Node 服务 器 ， 对 应 代码 创建 了 一 个 HITP 服务 器 ， 并 监听 本 地 
指定 端口 上 的 传 入 请 求 。 与 第 6 章 中 的 示例 不 同 ， 此 处 导入 了 一 个 constants 模块 。 
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constants.js 模块 涵盖 了 下 列 代 码 块 。 


module.exports = { 
mrte e300r 
"waudience": "readers" 
} 
上 述 代码 由 导出 的 JSON 构成 。 全 部 键 均 为 常量 ， 并 在 其 他 模块 间 用 作 单 例 。 注 意 ， 
仅 当 加 载 了 节点 进程 ， 且 不 执行 永久 性 地 写 入 操作 时 ， 这 些 键 才 是 可 变 的 。 
在 Nodejs 中 ， 此 类 常量 文件 可 以 包含 启动 应 用 程序 所 需 的 任何 可 配置 数据 ， 或 者 是 
跨 模 块 、 全 局 使 用 的 数据 。 更 具体 地 说 ，port 键 是 一 个 配置 类 型 的 元 数据 键 ，audience 可 
称 为 常量 类 型 的 元 数据 。 


7.3.3 ”模板 嵌入 机 制 


嵌入 模板 是 将 数据 模型 插入 至 视图 的 过 程 。 这 里 的 模型 可 以 是 JSON 或 简单 的 字符 
串 。 模 板 嵌 入 过 程 中 也 产生 了 新 的 前 端 技术 ， 例 如 reactjs、emberjs、handlebars.js 等 。 采 
用 此 类 模板 引擎 ， 可 在 Node.js 服务 器 自身 中 开发 Web 客户 端 。 这 也 使 得 JavaScript 变 为 

-种 同 构 技 术 。 下 面 将 利用 handlerbarjs 在 服务 器 端 实现 此 类 机 制 。 

handlebarjs 是 一 个 简单 的 模板 引擎 ， 并 可 将 JSON 数据 嵌入 模板 中 。 根 据 以 下 各 项 步 
又 ， 我 们 将 在 Node 服务 器 上 对 其 加 以 实现 。 

(1) 首先 ， 使 用 下 列 命 令 并 作为 节点 模块 安装 handlebar。 

npm install --save handlebars 

(2) 待 安装 完毕 后 ， 即 可 在 appjs 中 包含 handlebar 模块 ， 如 下 所 示 。 

const handlebar = require('handlebars'); 


(3) 在 与 handlebar 模块 协同 工作 之 前 ， 首 先生 成 一 个 通过 响应 发 送 的 HTML。 下 列 
index.html.js 文件 包含 了 模板 数据 。 


module.exports = 、 
<!DOCTYPE html> 
<html> 
<head> 
<title>Hello readers</title> 
</head> 
<body> 
<h2>Greeting audience!</h2> 
<h3>Life is beautiful</h3> 
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</body> 
</html> 


此 处 在 考虑 HTML 数据 时 遵循 了 相应 的 命名 规则 (虽然 并 不 标准 ), 并 通过 js 扩展 导 
出 为 节点 模块 。 

(4) 针对 HTML 响应 生成 一 个 路 径 /html。 下 列 代码 表示 作为 响应 发 送 HTML 时 所 做 
的 一 些 修改 。 


const http = require('http'); 

const constants = require('./constants'); 
const template = require('./index.html'); 
const port = constants.port; 

const handlebar = require('handlebars'); 
//console.log ("template", ); 
http.createServer((req, res) => { 


if(req.url == '/html'){ 
res.setHeader('content-type', ‘text/html'); 
res.end (template); 
}else 
res.end(`Hello ${constants.audience}); 
}) .listen (port); 
console.1log( ‘Node Server is running on port: ${port}.) 


上 述 代码 导入 了 模板 文件 require(index.html)， 并 于 随后 将 响应 头 设置 为 text/html。 
这 样 ， 客 户 端 浏览 器 就 知道 如 何 解释 从 服务 器 接收 到 的 响应 。 
(5) 利用 http:/localhost:3300/html 请 求 节点 服务 器 ， 对 应 的 输出 结果 如 图 7.10 所 示 。 


Cs CGC © localhost:3300/html 


Greeting audience! 


Life is beautiful 


图 7.10 


(6) 利用 不 同 的 数据 集 杠 入 同一 模板 。 出 于 演示 目的 ， 此 处 将 audience 修改 为 readers， 
并 将 beautiful 修改 为 simple。 对 此 ， 需 要 在 HTML 中 实现 两 个 占 位 符 ， 如 下 所 示 。 
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//index.html.js 
module.exports = 、 
<!DOCTYPE html> 
<html> 
<head> 
<title>Hello readers</title> 
</head> 
<body> 
<h2>Greeting {{audience}}!</h2> 
<h3>Life is {{adjective}}</h3> 


</body> 
</html> 
(7) 创建 一 个 包含 键 audience 和 adjective 的 模型 ， 如 下 所 示 。 
{ 
"audience": "Readers", 


"adjective": "simple" 
} 


(8) 当 嵌 入 新 数据 (JSON) 时， 须 将 代码 更 新 为 如 下 所 示 。 
const templateData = handlebar.compile (template) ({ 
"audience": "Readers", 
"adjective": "simple" 
}) 
作为 属性 ，handlebar 包含 了 一 个 compile0 方 法 ， 该 方法 将 JSON 数据 嵌入 HTML 中 。 
最 后 ， 不 要 忘记 将 响应 数据 从 template 更 改 为 templateData， 如 下 所 示 。 
res.end (templateData); 
(9) 重 启 节点 服务 器 并 访问 localhost:3300/html, 浏览 器 中 所 显示 的 输出 结果 如 图 7.11 
所 示 。 


> GC © localhost:3300/html 


Greeting Readers! 


Life is simple 


图 7.11 


需要 注意 的 是 ,文本 beautiful 被 蔡 换 为 simple。 当 前 原型 相对 简单 ， 根 据 需 要 ， 还 可 
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以 通过 数组 、 对 象 等 来 呈现 模板 数据 ， 进 而 向 模板 数据 中 增加 一 些 复杂 性 。handlebar 是 
一 个 较为 稳定 的 库 ， 并 可 对 此 进行 适当 处 理 。 关 于 handlebar 库 ， 读 者 可 访问 http:/ 
handlebarsjs.com/ 以 了 解 更 多 信息 。 


7.4 与 YAML 进行 比较 


YAML 是 另 一 种 与 软件 语言 无 关 的 数据 交换 格式 , 这 种 格式 正 逐 渐 流行 起 来 。 YAML 
是 YAML Ain’t Markup Language 的 递归 缩写 ， 通常 用 于 存储 配置 、 模 式 和 属性 等 元 数据 。 
YAML 被 认为 是 一 种 人 类 可 读 的 数据 序列 化 标准 , 它 依 赖 于 行 结束 符 的 空格 、 位 置 和 简单 
字符 ,类似 于 Ruby 和 Python 等 流行 脚本 语言 。YAML 特别 关注 元 素 之 间 的 间距 ,并且 不 
支持 制 表 符 。 与 JSON 类 似 ，YAML 键 / 值 对 由 冒号 分 隔 。 与 文本 格式 类 似 ， 连 字符 用 于 
指示 列表 项 ， 而 JSON 则 将 列表 项 置 于 数组 或 子 对 象 中 。 由 于 YAML 与 软件 语言 无 关 ， 
因此 我 们 需要 解析 器 来 理解 该 文件 中 的 内 容 。 此 类 解析 器 适用 于 大 多 数 流行 的 语言 ， 如 
PHP、Python、C++、Ruby 和 JavaScript。 下 面 在 YAML 中 构建 一 个 configjson 文件 以 理 
解 YAML 的 具体 含义 ， 如 图 7.12 所 示 。 


config.yaml 


"test project" 


"project x" 
"vendor” 
"true” 


图 7.12 
类 似 于 JSON 对 象 , YAML 文件 中 包含 了 全 部 数据 。 不 同 之 处 在 于 如 何 将 数据 作为 数 
据 项 列表 进行 排列 ， 以 及 如 何 使 用 间距 和 位 置 来 排列 数据 列表 。 对 此 ， 互 联网 上 存在 大 量 
的 YAML 资源 可 用 来 验证 、 序 列 化 和 反 序列 化 YAML 数据 。 
9) 关于 YAML， 读者 可 访问 http://www.yaml.org 以 了 解 更 多 信息 ， 相 关内 容 将 以 
YAML 格式 予以 展示 。 
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7.5 本 章 小 结 


JSON 正在 快速 演变 为 互联 网 上 最 为 流行 的 数据 交换 格式 ， 但 并 不 仅 限于 数据 交换 。 
针对 依赖 项 管理 器 、 包 管理 器 、 配 置 管理 器 和 元 数据 存储 ， 本 章 讨论 了 JSON 的 元 数据 存 
储 应 用 方案 。 除 此 之 外 ， 本 章 还 介绍 了 YAML， 它 被 认为 是 JSON 的 替代 方案 。 第 8 章 将 
考查 用 于 调试 、 验 证 和 格式 化 JSON 的 各 种 资源 。 


第 8 章 hapijs 简介 


在 过 去 的 几 年 里 ，Node 社区 处 于 较 快 的 发 展 阶段 ， 并 涌现 出 了 各 种 框架 。 这 些 框 架 
实现 了 多 方面 的 基准 测试 ， 例 如 代码 复杂 性 、 体 系 结构 模式 、 性 能 以 及 社区 应 用 。 一 些 框 
架 ， 例 如 Express 和 Koa， 以 其 极 简 的 特性 而 闻名 ; 而 其 他 框架 ， 如 hapi 和 sail， 则 提供 
了 可 配置 的 或 结构 化 的 编码 技术 。 

本 章 将 讨论 hapijs， 它 是 一 种 可 配置 的 框架 ， 并 使 用 JavaScript 对 象 作为 配置 数据 。 
hapijs 并 不 是 纯粹 的 JSON， 而 是 作为 JavaScript 文本 提供 的 典型 的 对 象 表示 法 。 本 章 主 
要 讨论 JSON 的 实现 和 可 扩展 性 ， 以 便 采 用 hapi 框架 构建 JavaScript 服务 器 。 

本 章 主要 涉及 以 下 主题 。 
利用 JSON 实现 基本 的 服务 器 配置 。 
利用 JSON 配置 API。 

使 用 JSON 元 数据 和 常量 。 

利用 POSTMAN 测试 hapi 服务 器 API。 
POSTMAN 下 的 JSON。 

面 将 逐一 对 此 加 以 讨论 。 


了 OOODODO 


8.1 利用 JSON 实现 基本 的 服务 器 配置 


前 述 内 容 在 讨论 模板 嵌入 时 曾 搭建 了 一 个 Node 服务 器 ,我 们 可 在 此 基础 上 进行 修改 ， 
或 者 生成 一 个 新 的 App。 如 果 打 算 使 用 相同 的 App， 则 需要 完成 以 下 工作 。 

口 ”修改 appjs。 

口 消除 模板 相关 的 实现 。 

在 修改 完毕 后 后 ， 图 8.1 显示 了 代码 库 中 当前 的 结构 。 


) OPEN EDITORS 
4 UNTITLED (wo_ + 


{} packagejson 
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简单 地 讲 ， 上 述 代码 创建 了 一 个 简单 的 HTTP 服务 器 。createServer() 方 法 包含 了 请 求 


参数 req， 用 于 处 理 输入 请 求 ， 以 及 服务 器 间 的 响应 实例 。 此 处 使 用 了 响应 对 象 的 end0 
方法 ， 并 将 响应 数据 〈Hello readers) 发 送 至 客户 端 。 

相关 步骤 如 下 。 

(1) 首先 需要 安装 hapi 框架 ， 对 应 版 本 不 应 低 于 v17.x.x。 默 认 状态 下 ， 包 管理 器 将 
为 我 们 安装 最 新 的 版 本 。 另 外 ， 确 保 在 安装 完毕 后 在 packagejson 中 对 其 进行 验证 。 对 应 
的 安装 命令 如 下 所 示 。 

npm install hapi --save 


Node 包 管 理 器 在 App 的 节点 模块 中 安装 了 名 为 hapi 的 新 的 依赖 关系 。 
(2) 接 下 来 需要 在 appjs 中 包含 hapi 模块 ， 如 下 所 示 。 


const Hapi = require('hapi'); 


包含 hapi 模块 可 使 我 们 使 用 hapi 框架 中 的 全 部 特性 。 
(3) 构建 一 个 基本 的 hapi 服务 器 ， 对 应 代码 如 下 所 示 。 


const Hapi = require('hapi'); 
const constants = require('./constants'); 
const port = constants.port; 
const server = new Hapi.Server({ 
port 
Ds 
server.start (); 
console.log(`Server running at: ${server.info.uri} ); 


上 述 代码 执行 了 以 下 操作 。 
口 “类似 于 其 他 节点 模块 ， 我 们 需要 使 用 一 个 hapi 模块 。 


口 之 前 设置 了 一 个 自 定义 常量 模块 ， 进 而 提供 一 些 配 置 数据 。 当 前 ， 我 们 仅 需 使 用 
来 自 常 量 的 端口 。 

口 利用 server0 方 法 创建 了 一 个 新 的 hapi 服务 器 实例 。 注 意 ， 针 对 该 服务 器 ， 我 们 
使 用 JSON 作为 配置 数据 。 

口 最 后 ， 使 用 服务 器 实例 的 start() 方 法 初始 化 服务 器 ， 该 方法 可 视 为 一 个 触发 器 进 
而 启动 特定 的 服务 器 。 


考查 以 下 场景 , 假设 开发 团队 计划 处 理 两 个 服务 器 实例 ,利用 相同 的 配置 ， 服务 器 的 
初始 化 可 根据 相关 条 件 轻 松 地 切换 。 这 可 通过 下 列 伪 代 码 予以 展示 。 


If(serverl is configured) 
Serverl .start () 
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else 
server2.start() 


或 者 以 下 列 并 行 方式 执行 。 


Serverl .start (); 
Server2.start (); 


@ 两 个 实例 可 在 同一 端口 上 运行 
口 执行 node appjs 以 初始 化 服务 器 。 对 应 结果 如 图 8.2 所 示 。 


brunos-MacBook-Pro:test-node-app bruno$ Edaliapps 
Server running at: http://brunos-MacBook-Pro.local:3300 


随后 ， 服 务 器 将 在 http://localhost:3300 上 启动 。 

在 上 述 输 出 结果 中 ， 不 要 与 URL 中 提 及 的 机 器 的 配置 文件 名 混淆 ， 它 仅 充 当 于 本 地 
主机 。 如 果 将 上 述 地 址 置 于 浏览 器 中 ， 将 会 收 到 一 个 错误 代码 ， 表 示 没 有 找到 错误 消息 ， 
其 原因 在 于 ， 当 前 尚未 配置 任何 API URL 端点 。 稍 后 将 对 此 加 以 讨论 。 在 考查 API 之 前 ， 
下 面 首先 讨论 在 package.json 中 配置 启动 命令 ， 这 也 是 采用 JSON 进行 配置 时 需要 注意 的 
另 一 个 特性 。 


8.2 使 用 JSON 元 数据 和 常量 


如 前 所 述 ,使 用 node appjs 命令 可 启动 服务 器 , 这 一 点 我 们 已 有 所 了 解 , 但 目前 尚未 
讲述 如 何 使 用 该 命令 。Node 包 管 理 器 (Node Package Manager，NPM) 提供 了 一 种 方法 ， 
并 利用 package.json 中 的 scripts 键 配置 服务 器 的 start 命令 ， 如 下 所 示 。 


{ 
”name "test=node=app"y 
"uaralon TO 
"description™": "™, 
"main": "index.js", 
"scriptas: 7 
De 
"atart”s 
]} 
Saathore 于 区 


"echo \"Error: no test specified\" &amp7amp7&amp7amp; exit 1"， 
"node app.js" 
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ICemSen mISCY, 
"dependencies": { 
"handleobars™ waa 0 Tn 
"hapin: nAT7.2.0n 
} 
} 


上 述 代 码 在 脚本 的 文本 中 添加 了 一 个 start 键 , 并 作为 值 提供 了 实际 的 Node 服务 器 启 


动 命令 。 新 命令 的 运行 方式 如 下 所 示 。 


npm start 


当前 ， 服 务 器 处 于 运行 状态 。 此 处 ，start 键 已 被 npm 作为 启动 服务 器 的 默认 命令 输 
入 而 识别 。 但 该 过 程 并 非 是 真正 的 自 定义 操作 ， 我 们 还 可 将 该 命令 命名 为 new-start， 以 实 


现 进一步 的 定制 行为 。 对 此 ， 需 要 在 package.json 中 进行 如 下 修改 。 


{ 
"name": "test-node-app", 
"version": "1.0.0"， 
TAGscription™ sn 
"main": "index.js", 
CITY 5 
"test": "echo \"Error: no test specified\" &amp;amp; &amp;amp; exit 
"start": "node app.js", 
"new-start": "node app.js" 
}, 
0 
"iceonse": MISC™, 
"dependencies": { 
shandlebars™:, “aaa0-.11"; 
i 
} 
} 


下 面 利用 自 定义 的 启动 命令 运行 服务 器 ， 如 下 所 示 。 


npm run new-start 


npm 解析 package.json， 并 发 现 了 new-start 键 及 其 对 应 的 执行 命令 。 此 类 启动 命令 并 


1", 


不 是 hapijs 框架 所 特有 的 , 但 却 与 npm 框架 中 的 packagejjson 相关 。 此 外 ,还 可 将 其 
Express、Sail、Koa 或 任何 其 他 框架 中 。 

针对 各 种 场景 ， 这 仅 是 JSON 实现 的 开始 阶段 。hapi 服务 器 与 配置 代码 库 相 关 ， 
来 将 讨论 如 何 利用 JavaScript 对 象 表示 法 配置 路 由 。 


二 


接 下 
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8.3 利用 JSON 配置 API 


简 而 言 之 ，API 是 指 访问 应 用 程序 数据 的 一 种 方式 ， 并 将 其 以 期 望 的 格式 呈现 出 来 。 
API 实现 通过 应 用 程序 请 求 授予 对 其 数据 的 访问 权 ， 这 可 以 是 一 个 HITP 请 求 或 FTP。 本 
书 则 主要 考查 HTTP 请 求 。 

请 求 基本 上 由 以 下 内 容 构成 。 

口 统一 资源 定位 符 (Unique Resource Location，URL )。 

口 请 求 关 。 

口 请 求 体 。 

API 服务 器 提供 了 一 个 端点 URL， 以 便 可 通过 客户 端 ( 如 浏览 器 ) 访问 所 需 的 信息 。 
前 述 章节 曾 讨论 了 如 何 用 Nodejs 实现 一 个 API 服务 器 。 

下 面 考查 hapi 如 何在 Nodejs 上 实现 此 类 API。 对 此 ， 考 查 下 列 代码 。 

const Hapi = require('hapi'); 

const constants = require('./constants'); 

const port = constants.port; 


const server = new Hapi.Server({ 
port 
1D); 


SerVer .route ({ 
method: "GET' 
path:'/greetings', 
handler (request, h) { 
return 'hello readers!'; 
} 
DD); 
server.start (); 
console.1og(`Server running at: ${server.info.uri} ); 


在 具体 讨论 代码 之 前 ， 首 先 在 浏览 器 中 访问 http://localhost:3300/greetings， 进 而 可 得 

到 输出 结果 Hello readers!。 

上 述 代码 中 引入 了 hapi 服务 器 实例 中 的 新 方法 route()。 函 数 路 由 所 需 的 最 小 配置 包 

含 方法、 路 径 和 处 理 程序 ， 具 体 如 下 。 
口 方法 : 表示 为 HITP 资源 方法 ， 并 以 此 访问 HTTP 服务 器 上 的 资源 。 其 他 基本 方 

法 还 包括 GET、POST、PUT 和 DELETE。 在 当前 示例 中 , 我 们 将 使 用 GET 方法 。 
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口 路 径 : 表示 为 一 个 URL 或 端点 。 这 些 端点 与 域 连接 工作 ， 以 定位 、 请 求 来 自任 
何 客户 端的 特定 数据 ， 如 浏览 器 。 在 当前 示例 中 ， 我 们 将 使 用 http://localhost: 
3300/greetings。 

口 ”处 理 程序 : 每 个 URL 路 径 均 包含 一 个 特定 的 目标 ; 或 提供 与 其 方法 相关 的 某 种 
功能 。 此 类 功能 是 使 用 处 理 程序 的 函数 生成 的 。 在 Hapi v17.2.0 中 ， 处 理 程序 键 
包含 一 个 带 有 两 个 参数 的 回调 函数 ， 如 下 所 示 。 

e 第 一 个 参数 表示 所 接收 的 实例 请 求 。 其 中 , 请求 实例 由 所 有 的 请 求 信息 构成 , 例 
如 请 求 头 、URL 参数 、 请 求 体 、 事 件 、 原 始 节 点 请 求实 例 等 。 
e 第 二 个 参数 则 是 hapi 服务 器 实例 和 我 们 所 提供 的 路 由 配置 数据 上 下 文 的 组 合 。 

数据 在 handler 回调 中 返回 ， 可 以 是 简单 的 字符 串 ， 也 可 以 是 由 hapi 转换 成 的 服务 器 

响应 ， 甚 至 是 HTML 的 复杂 的 JSON。 此 类 数据 类 型 的 设置 头 〈 例 如 内 容 类 型 ) 将 通过 
hapi 自身 予以 处 理 。 

下 面 将 路 由 功能 隔离 到 特定 的 路 由 文件 中 ， 具 体 步骤 如 下 。 

(1) 从 单独 的 文件 (例如 routesjs 文件 ) 导出 路 由 配置 对 象 ， 如 下 所 示 。 

//routes.js 

module.exports = [{ 

method: 'GET', 
path:'/greetings', 
handler (request，h) { 
return ‘<b>hello readers!</b>; 
} 

}] 

注意 ， 我 们 已 经 导出 了 一 个 数组 ， 因 此 可 以 传递 一 个 数组 中 的 多 个 路 由 配置 对 象 。 

(2) 移 除 位 于 appjs 中 的 路 由 配置 对 象 ， 并 在 appjjs 文件 中 包含 routesjs， 如 下 所 示 。 

const Hapi = require('hapi'); 

const constants = require('./constants'); 

const routes = require('./routes'); 


const port = constants.port; 
const server = new Hapi.Server({ 


server.route (routes); 
server.start (); 
console.log(‘“Server running at: ${server.info.uri}.); 


需要 注意 的 是 ， 此 处 作为 参数 向 serverroute() 方 法 中 传递 了 routes 常量 。 在 终端 中 重 
新 启动 hapi 服务 器 ， 将 会 得 到 相应 的 输出 结果 。 这 里 ， 将 路 由 从 App 中 隔离 出 来 可 视 为 
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一 种 较 好 的 方法 ， 在 提升 了 路 由 控制 器 的 可 维护 性 之 外 ， 还 保持 了 appjjs 的 简洁 性 。 
(3) 重新 启动 hapi 服务 器 , 在 浏览 器 中 访问 http://localhost:3300/greetings 以 验证 是 否 
可 正常 工作 。 


8.4 在 hapi 中 配置 插件 


插件 提供 了 一 种 方式 , 可 在 不 同 的 代码 部 分 中 处 理 业 务 逻 辑 。 插件 的 实现 不 同 于 中 间 
件 ， 以 及 用 于 特定 目的 的 任何 第 三 方 工具 方法 。 
下 面 创建 一 个 插件 以 了 解 插 件 的 工作 方式 。 当 集成 插件 时 , 需要 在 应 用 程序 中 生成 一 
个 名 为 pluginsjs 的 文件 。 该 文件 由 下 列 代 码 片 段 构成 。 
exports.logRequest = { 
register (server, options){ 
console.10g("A plugin got called!"); 
}, 
name: "logRequest" 
} 
上 述 代码 包含 了 构成 插件 所 需 的 最 少 属性 。 其 组 合 结果 由 一 个 简单 的 对 象 构 成 ,其 中 
定义 了 一 个 register() 方 法 并 以 name 作为 键 。 
口 register0: register0 是 一 个 回调 方法 , 当 插 件 在 appjs 中 注册 服务 器 而 被 绑 定 时 将 
被 显 式 地 调用 。 该 方法 在 服务 器 初始 化 阶段 即 被 调用 , 而 不 是 请 求 事件 时 。 因此， 
我 们 移动 了 'then-able' 回 调 中 的 server.start0 方 法 ， 以 便服 务 器 在 加 载 插 件 时 处 于 
等 待 状态 。 简 而 言 之 ， 这 里 采用 了 内 建 的 Promise 库 方法 处 理 异 步 问 题 。 所 有 修 
改 之 处 均 参 考 了 appjs 文件 ， 如 下 所 示 。 
const Hapi = require('hapi'); 
const constants = require('./constants'); 
const routes = require('./routes'); 
const plugins = require('./plugins'); 
const port = constants.port; 
const server = new Hapi.Server({ port }); 


server.route (routes); 
server.register (plugins.logRequest) 
.then(() => { 

server.start (); 
i 
-catch((err) => { 
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console.1og("error", err); 


| 


console.1og(`Server running at: ${server.info.uri}); 


于 使 用 了 Promises 处 理 插件 的 异步 问题 ， 因 而 当 抛 出 任何 错误 时 ，catch( 方 法 均 会 
对 此 进行 处 理 。 

口 name: 插件 是 用 一 个 name 属性 定义 的 ， 以 供 hapi 进行 标识 。 每 个 自 定义 插件 都 

是 在 使 用 之 前 命名 的 ， 它 是 一 个 强制 属性 。 

当 在 hapi 服务 器 中 设置 了 插件 后 ， 通 过 重新 启动 服务 器 并 通过 浏览 器 请 求 即 可 运行 
代码 。 

查看 终端 并 可 得 到 下 列 输出 结果 。 

A plugin got called! 

Server running at: http://brunos-MacBook-Pro.1local:3300 

根据 hapi v17 所 发 布 的 文档 ， 其 中 涵盖 了 下 列 属性 并 可 在 实现 某 个 插件 时 加 以 使 

{ register, name, version, multiple, dependencies, once, pkg } 

下 面 讨论 一 些 相 对 高 级 的 话题 , 并 编写 一 个 插件 以 在 每 次 接收 一 个 请 求 时 记录 终端 控 
制 台中 的 URL， 具 体 步 又 如 下 。 

(1) 使 用 register() 方 法 的 服务 器 实例 监听 插件 中 的 onRequest 事件 。Node.js 是 使 用 事 
件 驱 动 模型 作为 其 主干 来 实现 的 。 当 某 个 请 求 在 运行 期 内 通过 服务 器 所 接收 ， 将 会 触发 
onRequest， 如 下 所 示 。 

SerVer .ext ('onRequest', (request, reply)=>{ 


console.1log("Listening to request!"); 
1 


(2) 当前 ， 若 重新 启动 服务 器 并 访问 URL， 将 会 得 到 一 条 错误 消息 ， 其 原因 在 于 ， 
我 们 尚未 指定 事件 循环 下 一 步 执行 的 任务 。 当 处 理 请 求 并 将 其 传递 至 对 应 的 控制 器 方法 
时 ， 需 要 使 用 包含 reply.continue 的 retum 语句 ， 如 下 所 示 。 

SerVer .ext ('onRequest '， (request, reply)=>{ 

console.log("Listening to request!"); 
return reply.continue; 

[| 

continue 属性 被 实现 为 reply 实例 的 属性 , 但 是 由 数据 组 成 的 , 按照 新 的 ECMAScript， 
这 是 一 种 符号 数据 类 型 。 当 在 控制 台中 输出 reply 实例 时 ， 可 看 到 一 组 属性 ， 例 如 close、 
abandon 等 ， 进 而 可 指定 事件 循环 所 执行 的 任务 。 


o 
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(3) 至 此 ， 我 们 已 经 成 功 地 实现 了 某 种 机 制 以 处 理 所 有 请 求 。 最 后 ， 我 们 需要 从 请 
实例 中 提取 URL， 对 应 代码 如 下 所 示 。 


//plugin.js 
exports.logRequest = { 
register (server, options){ 
console.1og("R plugin got called!"); 
SerVer .ext ('onRequest', (request, reply)=>{ 
console.log("Listening to request!"); 
const path = request.url .path; 
const target = request.url.query.target; 
console.1og(`The target is ${target} for url: ${path}° ); 
return reply.continue; 


}) 
}, 
name: "logRequest" 
} 
在 将 请 求实 例 输出 至 控制 台 后 , 可 以 看 到 所 提供 的 全 部 属性 。 当 前 , 我 们 使 用 了 URL 


属性 提供 所 有 的 请 求 URL 数据 ， 例 如 可 以 通过 URL 传递 的 URL 路 径 和 查询 参数 。 相 应 
地 ， 我 们 将 使 用 target 键 作 为 /greetings URL 中 的 查询 参数 。 该 URL 形 如 http://localhost: 
3300/greetings?target=developers。 

利用 npm start 重新 启动 服务 器 ， 可 得 到 如 图 8.3 所 示 的 结果 。 


> node app.js 


A plugin got called! 

Server running at: http://brunos-MacBook-Pro.local:3300 
Listening to request! 

The target is undefined for url : /greetings 

Listening to request! 

The target is undefined for url : /favicon.ico 


图 8.3 


起 于 rn Re 组 合 将 会 导致 App 的 增 量 开发 以 及 代码 的 模块 化 结 
果 。 对 于 较 大 的 项 目 ， 这 将 有 助 于 代码 的 可 维护 性 。 


8.5 使 用 POSTMAN 测试 API 


我 们 所 创建 的 API 端点 (http://localhost:3300/greetings) 是 一 个 GET 方法 请 求 类 型 的 
API 调用 ， 并 可 方便 地 在 浏览 器 URL 定位 器 中 直接 测试 API 端点 ， 其 原因 在 于 ， 当 从 浏 
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览 器 URL 定位 器 中 直接 访问 任何 URL 输入 时 ， 默 认 状态 下 将 执行 一 个 GET 方法 请 求 。 
那么 ， 对 于 POST、PUT、DELETE 来 说 ， 情 况 又 当 如 何 ? 当然 ， 浏 览 器 可 以 发 出 此 类 请 
求 ， 但 并 不 是 在 默认 状态 下 ， 也 不 是 通过 URL 定位 器 中 的 直接 输入 ; 而 是 通过 AJAX 请 
求 或 表单 POST 请 求 。 

在 这 种 情况 下 ， 如 果 创建 了 一 个 API 服务 器 ， 并 打算 测试 URL 端点 相对 于 其 他 请 求 
方法 的 正确 性 时 ， 我 们 将 无 法 对 此 进行 直接 操作 。 此 时 ， 需 要 在 客户 端 编写 一 些 JavaScript 
代码 进而 生成 此 类 API 调用 ;或 者 使 用 诸如 POSTMAN 这 一 类 REST 客户 端 生成 API 调用 。 


8.5.1 使 用 POSTMAN 测试 hapi 服务 器 调用 


本 节 将 针对 hapi 服务 器 API 的 用 例 安装 POSTMAN， 并 对 其 进行 测试 。 对 此 ， 可 执 
行 以 下 步骤 。 
(1) 访问 https://www.getpostman.com/。 
(2) 根据 操作 系统 下 载 该 App 并 安装 。 
图 8.4 显示 了 POSTMAN App 的 外 观 。 


| ww | + [… 


| GETY | Enter request URL 


Authorization Headers Body Pre-requestScript Tests 


No Auth 


Hit the Send button to get a response. 


Do more with requests 


Mock Monitor Document 


~ El 
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对 于 该 客户 端 所 生成 的 HTTP 请 求 ， 现 在 只 须 输 入 所 需 的 详细 信息 即 可 ， 有 具体 步骤 
如 下 。 

(1) 输入 请 求 数据 的 URL。 在 当前 示例 中 为 http://localhost:3300/greetings。 

(2) 上 述 请 求 URL 输入 表示 为 请 求 方法 选择 项 下 拉 菜 单 。 这 里 须 检测 期 望 的 请 求 方 
法 是 否 已 被 选取 。 默 认 状 态 下 ， 将 选取 GET 方法 ， 此 外 ， 还 可 选择 其 他 所 需 方法 。 

(3) 检查 是 否 需 要 发 送 URL 或 头 参数 。 在 当前 示例 中 ，URL 参数 为 target。 图 8.5 
显示 了 全 部 所 需 数据 。 


GETY http:/localhost:3300/8reetings?target=developers Params | sna ~ | Save ~ 


Key Value Description Bulk Edit 


{target developers 
Authorlzation 。 Headers Prerequest Script 。 Tests 
NoAuth 


Headers (6) TestResults Status: 200 OK Time: 133 ms 


Prety Raw Prevew HM vv 三 口 Q 
Ma hello reoders!| 


图 8.5 


单 击 Send 按钮 并 接收 请 求 数据 。 这 便 是 我 们 在 开发 过 程 中 测试 和 调试 每 个 API 的 方 
法 ， 该 方法 节省 了 大 量 的 调试 时 间 ， 并 可 在 必要 时 按 需 执行 异步 请 求 。 


8.5.2 POSTMAN 下 的 JSON 


POSTMAN App 的 目的 不 仅 是 提供 内 容 (虽然 这 是 一 个 十 分 重要 的 功能 )， 还 可 将 所 
有 API 端点 整合 至 一 个 集合 中 并 一 起 运行 。 

除 此 之 外 ， 还 可 以 使 用 浏览 器 的 POSTMAN 拦截 器 扩展 来 拦截 POSTMAN 客户 端 。 
这 可 帮助 我 们 在 POSTMAN App 中 直接 查看 浏览 器 请 求 ， 且 无 须 任何 手动 交互 操作 。 对 
于 可 移植 性 来 说 ， 甚 至 还 可 导出 端点 集合 。 
此 类 特性 在 任何 API 服务 器 开发 过 程 中 均 十 分 有 用 。 当 访问 POSTMAN LABS 时 (对 
应 网 址 为 https://github.com/postmanlabs)， 可 以 看 到 ， 全 部 的 POSTMAN 存储 库 均 为 开源 
且 供 社区 所 用 。 此 外 ，JSON 的 广泛 用 途 也 可 在 此 得 到 印证 , 特别 是 POSTMAN 集合 存储 
库 ， 对 应 网 址 为 https://github.com/postmanlabs/postman-collection。 
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谍 下 来 将 逐步 考查 集合 特性 ， 以 便 了 解 App 下 JSON 的 应 用 方式 。 

(1) App 右 侧 包 含 了 两 部 分 内 容 ， 即 History 和 Collection。 如 前 所 述 ， 当 生成 API 
调用 时 ， 该 调用 将 记录 于 App 的 History 部 分 。 下 面 导航 至 History 部 分 并 单 击 选项 按钮 
(采用 3 个 点 表示 )， 如 图 8.6 所 示 。 
从 弹出 菜单 中 选择 Save Request 选项 ， 将 会 显示 一 个 SAVE REQUEST 对 话 框 
(2) 此 处 可 以 保留 与 名 称 相同 的 请 求 URL， 或 者 将 其 更 改 为 类 似 于 Greeting ul。 此 
外 ， 我 们 还 需要 创建 一 个 可 以 保存 请 求 的 集合 ， 该 操作 可 在 同一 个 对 话 框 中 完成 ， 如 
图 8.7 所 示 。 


o 


Requests in Postman are saved in collections (a group of requests). 
Learn more about creating collections 
Request name 
Greetings url 
Request description (Optional) 


Adding a description makes your docs better 


Fitter 
History Collections 


Clear all Descriptions support Markdown 


Select a collection or folder to save to: 
v Today 
am http://localhost:3300/g Q search fora collection or folder 
get=developers se 
| 
eer http//l + SaveRequest 


@ ShareRequest 


All Collections + Create Collection 


三 [Ge X 
8 


v january 10 号 bo apis 
-JW Monitor Request 了 
http:// 及 Global apis 
s/perfd 国 DocumentRequest 


http//l 加 Mock Request 
sw 和 下 Delete 
http//Ilocamoscso0oronmmerreporr 一 


图 8.6 图 8.7 
单 击 Save 按钮 ， 并 将 请 求 数据 保存 至 所 选 的 集合 中 。 
(3) 待 集合 保存 完毕 后 ， 可 访问 该 集合 的 选项 并 从 弹出 菜单 中 选取 Export， 进 而 通过 
所 需 的 选项 导出 数据 。 随 后 ，JSON 文件 将 保存 至 当前 机 器 上 。 当 查看 该 文件 时 ， 其 内 容 
如 下 所 示 。 


Im 
pr 
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"response": [] 
} 
] 
这 里 ， 所 有 数据 都 是 纯 JSON 格式 的 。 因 此, 可 以 说 POSTMAN 是 以 JSON 的 形式 维 
护 数据 的 。 这 种 格式 还 提供 了 应 用 程序 中 的 易 读 性 和 数据 可 移植 性 。 


约 读者 可 访问 https://github.com/bron10/json-essentials-book/tree/master/chapter%209 
以 查看 代码 库 。 


8.6 本 章 小 结 


基于 JavaScript 的 可 配置 服务 器 具有 许多 优点 。 虽 然 在 开始 阶段 需要 花费 一 些 时 间 配 
置 相 关 对 象 ， 但 它 提供 了 极 大 的 灵活 性 、 可 复 用 性 ， 以 及 代码 的 可 维护 性 。 相 应 地 ，hapi 
服务 器 似乎 从 一 开始 就 为 可 伸缩 性 做 好 了 准备 。 而 且 , 我 们 无 须 处 理 来 自 服务 器 或 其 内 容 
的 全 部 数据 响应 ， 仅 须 将 数据 返回 回调 处 理 程序 即 可 ，hapi 将 亲自 识别 其 类 型 。 因 此 ， 为 
每 种 响应 类 型 (例如 HTML、JSON 或 任何 字符 串 ) 定义 内 容 类 型 ， 或 者 查找 npm 数据 包 
所 花费 的 时 间 将 大 大 减少 。 

最 后 ， 本 章 还 讨论 了 采用 POSTMAN 客户 端的 调试 处 理 及 其 应 用 。 创 建 一 个 完整 的 
hapi 服务 器 系统 需要 大 量 使 用 JSON， 这 也 是 在 服务 器 端 应 用 JSON 的 重要 步骤 之 一 。 第 
9 章 将 讨论 NoSQL 数据 库 MongoDB， 并 将 其 与 当前 App 集成 以 实现 持久 化 存储 。 
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NoSQL 数据 库 正 在 成 为 下 一 个 重大 事件 。 从 地 理 空间 数据 领域 到 小 型 企业 ，NoSQL 
数据 库 的 实现 呈 指 数 级 增长 ， 这 取决 于 NoSQL 在 管理 数据 时 体现 的 灵活 性 ， 本 章 也 将 对 
此 展开 讨论 。 

NoSQL 数据 库 并 不 是 一 类 关系 型 数据 库 。 也 就 是 说 ， 数 据 库 是 非 结构 化 的 ， 而 非 表 
格 形式 。 这 一 类 NoSQL 数据 库 可 容纳 各 种 数据 模型 , 例如 图 、 单 级 或 多 级 键 - 值 对 、JSON 
文档 等 。 其 中 ，MongoDB 即 一 类 NoSQL 数据 库 ， 并 采用 了 BSON 文档 存储 。 本 章 主要 

口 配置 MongoDB 并 与 hapiApp 集成 。 

JSON 和 BSON。 
插入 JSON 文档 。 
检索 JSON 文档 。 
MongoDB 中 基于 JSON 的 模式 。 


口 
口 
口 
口 


9.1 配置 MongoDB 


对 于 Linux、macOS 和 Windows 7〔 以 及 更 高 版 本 ) 等 操作 系统 来 说 ，MongoDB 的 
安装 过 程 较为 简单 。 其 中 ，Windows 7 版 本 需要 安装 一 些 补丁 程序 。 我 们 不 会 关注 每 个 操 
作 系 统 上 的 每 个 安装 步骤 ， 因 为 这 并 不 是 本 章 所 要 讨论 的 重点 内 容 。 因 此 ， 我 们 将 使 用 
Homebrew 在 macOS 上 安装 MongoDB。 

0 Windows 用 户 可 访问 https://docs.mongodb.com/manual/tutorial/install-mongodb-on- 
windows/ 以 了 解 更 多 信息 。 

Linux 用 户 可 访问 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-linux/ 以 
了 解 更 多 信息 。 

macOS 用 户 可 访问 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/ 
以 了 解 更 多 信息 。 


Homebrew 是 一 个 macOS 中 的 包 管 理 器 。 这 里 应 确保 首先 安装 Homebrew《〈 对 应 网 址 
为 https://brew.sh/)， 以 便 使 用 brew 命令 。MongoDB 的 配置 过 程 具体 如 下 。 
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(1) 利用 下 列 命 令 


brew install mongodb 


mongodb 包 。 


(2) 待 安装 完毕 后 ， 在 运行 MongoDB 服务 之 前 ， 需 要 向 /data/db 目录 授予 一 定 的 许 
可 权限 。 这 一 类 目录 经 配置 后 将 保存 MongoDB 数据 库 。 鉴 于 该 数据 目录 创建 为 根 目录 ， 
因而 需要 针对 MongoDB 应 用 程序 用 户 提供 相应 的 权限 ， 以 访问 该 目录 。 对 此 ， 可 采用 下 
列 命令 。 

sudo chown -R ‘id -un” /data/db 

颖 采用 递归 方式 设置 了 data 目录 中 所 有 目录 的 访问 权限 。 此 处 建议 使 用 chown 命 

i : chmod 命令 ，chmod 命令 也 可 以 授予 其 他 用 户 访问 权限 。 

(3) 在 Terminal 中 运行 mongod, 将 会 得 到 与 MongoDB 连接 及 其 存储 引擎 WiredTiger 
相关 的 一 些 信 息 。 

(4) 待 数据 目录 配置 完毕 后 ， 还 需要 检测 MongoDB 在 系统 上 是 否 运 行 良 好 。 对 此 ， 
可 执行 下 列 命 令 。 

mongod 


对 应 结果 如 图 9.1 所 示 。 


I CONTROL 
CONTROL 
CONTROL 
I CONTROL 
I CONTROL 
I CONTROL 
I CONTROL 


二 
Cinttandtisten] Detected data riles in / b cr n storage engine, so setttng the octive 


47]C134RR: Ox7FFFRQ2b9340] ,tyn-re 
2153, 80410538 I 5 tntt ] WiredTiger fe 73:884444][13488:@x 
2:53. 887+0530 


12:54-096r0sa0 工 CoMTROL 
工 CONTROL 

I CONTROL 

T COMTROL 

54.096+0530 工 CONTROL 
:54,096+0530 I CONTROL 
54. 096+8538 I CONTROL 

I CONTROL 

38 工 CONTROL 


其 中 ， Sa 在 默认 端口 27017 等 待 输入 请 求 .需要 注意 的 是 ,为 了 提升 0 
数据 库 系 统 上 App 的 可 扩展 性 ，WiredTiger 是 MongoDB 所 需 的 一 种 高 效 的 存储 引擎 ， 
在 3.2 版 本 之 后 与 MongoDB 实现 了 集成 。 另 外 , 图 9.1 中 还 显示 了 当前 MongoDB md 


第 9 章 在 MongoDB 中 存储 JSON 文档 “109 


号 ， 即 db version v3.6.2。 
在 配置 了 MongoDB 后 ， 下 一 步 是 将 hapi App 与 MongoDB 进行 连接 ， 以 实现 持久 化 
存储 。 


9.2 连接 hapiApp 与 MongoDB 


第 8 章 曾 讨论 了 hapi 服务 器 ， 本 节 将 讨论 hapi 与 MongoDB 之 间 的 连接 方式 。 

MongoDB 通过 npm 提供 了 客户 端 MongoDB 节点 模块 。 对 此 ， 需 要 在 之 前 创建 的 
node-test-app 目录 中 安装 mongodb 客户 端 。 相应 地 , 我 们 可 直接 从 GitHub 中 获取 代码 库 ， 
对 应 网 址 为 https://github.com/bron10/json-essentials-book。 

随后 ， 在 Terminal 中 运行 下 列 命 令 。 

npm install mongodb --save 

上 述 命 令 将 在 hapi 服务 器 App 的 节点 模块 中 安装 mongodb 客户 端 ， 并 将 其 自身 注册 

于 packagejson 中 ， 如 下 所 示 。 


1 
"name" : "test-node-app", 
waersion™ "10.0", 
"description®s =" 
"main": "index.js", 
aorapts A 
"test": "echo \"Error: no test specified\" &é& exit 1", 
"start": "node app.js", 
"new-start": "node app.js" 
}, 
Lt 
WLConsew: MISC®, 
"dependencies": { 
“handlebars™:. wad.0.11"; 
eb I 
wongodn™: "OS3.0:2" 
T 
} 


当 在 节点 模块 中 设置 了 mongodb 包 后 ， 即 可 在 代码 中 对 其 加 以 使 用 。 对 此 ， 我 们 需 
要 使 用 mongodb 以 及 连接 凭证 对 其 进行 配置 ， 如 下 所 示 。 


const Hapi = require('hapi'); 
const constants = require('./constants'); 


= = 
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const routes 


if (err) 


= require('./routes'); 

const plugins = require('./plugins'); 
const port = constants.port; 

const server = new Hapi.Server({ Port HR 
const MongoClient = require('mongodb') .MongoClient; 
MongoClient .connect (constants.mongodb.url, functionl(err, client) { 


throw err; 


console.1og("Connected successfully to mongodb server"); 


1D); 


server.route (routes); 

server.register (plugins.1logRequest) 
.then(() => { 

server.start (); 


1) 


.Catch((err) => { 
console.log("error", err); 


}) 


console.1og(`Server running at: ${server.info.uri}*); 


下 面 对 上 述 代 码 加 以 逐一 解释 。 


(1) 包含 require(mongodb)。MongoClient 提供 了 


名 为 connect 的 原型 方法 ， 负 责 构建 与 MongoDB 客户 站 


法 


个 mongo 实例 ， 进 而 提供 了 一 个 
之 间 的 连接 。 


(2) connect() 方 法 接受 mongo 服务 器 URL。 注 意 ， 这 里 提供 了 一 个 基于 JSON 的 解 
决 方案 ， 并 实现 为 constantjs 配置 提供 程序 。 我 们 通过 地 址 constants mongodb.url 访问 源 
自 JSON 的 URL 数据 。 该 URL 地 址 由 他 地 址 构成 (用 作 本 地 主机 ) 且 默 认 端 口 为 27017， 


如 下 所 示 。 


//constants.js 
module.exports = { 
Port S3005 


"audience": 
"mongodb": 


"readers", 
{ 


"url": "mongodb://localhost:27017" 


} 
} 


(3) MongoClient.connect 的 第 二 个 参数 表示 为 一 个 回调 函数 ， 并 在 mongo 尝试 构建 


与 MongoDB 之 间 岁 


构建 过 程 中 的 错误 或 成 功 结果 将 在 该 回调 中 予以 处 型 


EE 六 连接 时 被 调 


t 


。 鉴 于 代码 的 同 


H 


当 利 用 npm start 启动 服务 器 时 ， 将 得 到 下 列 输出 结果 。 


J 


个 回调 。 连 接 
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Server running at: http://brunos-MacBook-Pro.local:3300 
Connected successfully to mongodb server 
为 了 以 更 加 高 效 的 方式 处 理 异 步 代 码 ， 我 们 将 实现 相应 的 Promise， 下 面 将 对 其 进行 
简要 的 回顾 。 在 第 3 章 曾 介绍 了 Promaise， 它 表示 为 一 个 样板 代码 ， 与 常规 的 回调 方式 相 
比 ， 可 更 有 效 地 处 理 异 步 数据 。 此 外 ，Promise 还 提供 了 较 好 的 代码 结构 ， 并 维护 代码 的 
可 读 性 。 下 面 将 对 mongodb 客户 端 实现 Promise 化 ， 如 下 所 示 。 
MongoCclient .connect (Constants .mongodb .Url) 
.then (function () { 


console.log("Connected successfully to mongodb server") 
3 
.catch (function (err) { 
console.1og("Rn error occurred while connecting to mongodb!", err) 
}) 
注意 ， 此 处 在 App 初始 化 阶段 即 建立 了 与 mongodb 间 的 连接 。 这 里 不 建议 关闭 
MongoDB 连接 ， 因 为 这 很 容易 导致 内 存 泄 漏 问题 ， 所 以 需要 采取 以 下 措施 。 
(1) 将 mongodb 连接 方法 移 至 routesjs 中 ， 并 在 每 次 请 求 时 进行 连接 。 
(2) 在 每 次 请 求 时 完成 了 mongodb 连接 后 ， 即 关闭 该 连接 。 
当 在 文档 上 执行 相关 操作 时 ， 我 们 将 实现 上 述 功能 。 接 下 来 将 介绍 MongoDB 中 的 集 
合 和 文档 。 


9.3 JSON 和 BSON 
前 述 章节 详细 介绍 了 JSON， 本 节 将 从 以 下 3 个 方面 探讨 BSON。 
口 MongoDB 驱动 程序 将 输入 的 JSON 转换 为 称 为 BSON 的 、 二 进 制 编码 的 JSON， 
并 将 其 传递 至 存储 引擎 (当前 为 WiredTiger) 中 ， 如 图 9.2 所 示 。 


MongoDB 驱动 程序 


WiredTiger 
引擎 
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在 图 9.2 中 ， 输 入 的 JSON 被 转换 为 称 作 BOSN Document 的 二 进 制 序列 化 JSON 实 
体 ， 并 存储 于 数据 库 中 。 
口 BSON 规范 涵盖 了 诸多 优点 。 例 如 , 与 JSON 相 比 ,BOSN 占用 较 少 的 内 存 空间 ; 
BOSN 是 可 遍历 的 ， 同 时 还 可 对 其 进行 查询 ;另外 还 可 快速 被 解析 以 供 其 他 所 支 
持 的 语言 使 用 。 
口 “ 当 检索 BOSN 文档 时 ，BOSN 规范 中 的 数据 类 型 通过 MongoDB 驱动 程序 转换 为 
本 地 语言 数据 类 型 ， 以 供 开发 人 员 使 用 。 
开发 人 员 无 法 直接 参与 BSON 事物 ， 且 仅 可 与 JSON 协同 工作 。MongoDB 驱动 程序 
负责 处 理 一 切 事物 。 


0 关于 BSON， 读 者 可 访问 http://bsonspec.org/ 以 了 解 更 多 内 容 。 
9.3.1 集合 


在 结构 化 查询 语言 中 , 记录 或 元 组 将 被 存储 至 表 中 ; 而 BSON 文档 则 存储 于 MongoDB 
的 集合 中 。 这 里 ， 集 合 表示 为 一 个 或 多 个 BSON 文档 的 分 组 ， 同 时 也 是 指向 文档 集群 的 
引用 。 稍 后 我 们 将 对 文档 的 视图 加 以 讨论 。 


9.3.2 MongoDB shell 


MongoDB 提供 了 内 建 的 shell 或 Terminal， 以 访问 数据 库 并 执行 原始 操作 。 下 面 将 把 
一 个 简单 的 JSON 数据 插入 customers 集合 中 。 

假设 MongoDB 服务 已 经 运行 于 当前 系统 上 ， 此 处 打开 一 个 新 的 Terminal。 随 后 ， 输 
入 命令 mongo 打开 一 个 新 的 mongo shell， 后 面 跟着 另 一 个 命令 show dbs。 图 9.3 中 显示 
了 Terminal 中 的 输出 内 容 。 

其 中 ，show dbs 提供 了 之 前 配置 的 、MongoDB 的 /data/db 目录 中 的 数据 库 列表 。 

图 9.3 还 显示 了 另 一 条 命令 use test。use 是 一 条 功能 强大 的 命令 ， 可 创建 新 的 数据 
库 并 将 其 选 为 所 用 ; 或 者 选取 现 有 的 数据 库 。 在 上 述 示例 中 ， 我 们 选择 了 一 个 已 有 的 数 
据 库 。 

在 选取 了 数据 库 之 后 ， 接 下 来 需要 创建 一 个 集合 。 在 MongoDB 中 ， 我 们 无 须 维护 任 
何 模 式 , 开发 人 员 或 者 管理 员 负 责 根据 需要 构建 一 个 集合 , 这 种 灵活 性 有 效 地 减少 了 数据 
库 的 设计 时 间 。 

如 前 所 述 ， 我 们 将 集合 定义 为 文档 的 引用 。 因 此 ， 在 将 JSON 文档 (BSON) 插入 至 
集合 之 前 ， 集 合并 无 实际 用 处 ; 或 者 在 这 种 情况 下 集合 尚 不 存在 。 下 面 将 插入 一 个 新 的 
JSON 文档 ， 并 创建 一 个 名 为 customer 的 集合 ， 如 下 所 示 。 
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db .customers .insert({ 
1 
"firstname": "John", 


"cust id”" 


"Jastname": "Doe"， 
"Address": { 
"pincode": "900001", 
"street": "3305 Tenmile", 
wey LN 
} 
}) 


上 述 代 码 将 一 个 包含 客户 信息 (例如 名 称 和 地 址 ) 的 JSON 文档 插入 customer 集合 中 。 
在 shell 中 作为 命令 运行 上 述 代 码 片段 。 


Last login: Fri Feb 2 99:23:18 on ttys007 
brunos-MacBook-Pro;~ brunog mongo 
longoDB shell version v3.6.2 
eonnecting to: mongodb://127.9.9.1:27817 
longoDB server version: 3.6.2 
Server has startup warnings 
.797+9536 I CONTROL [initandlisten] 
797+8530 I CONTROL [initandlisten] *。 WARNING; Access control is not enabled for the dotabose 
797+8538 I CONTROL [initandlisten] ** Read and write access to dato and configuration is unrestricted 
797+9530 I CONTROL [initandlisten] 
.797+9539 I CONTROL [initandlisten] This server is bound to localhost 
.797+9536 I CONTROL [initandlisten] Remote systems will be unable to connect to this server, 
797+6530 I CONTROL [initandlisten] Start the server with --bind_ip <oddress> to specify which IP 
797+8538 I CONTROL [initandlisten] addresses it should serve responses from, or with --bind_ip_oll to 
797+8538 I CONTROL [initandlisten] bind to all interfaces. If this behavior is desired, start the 
CONTROL [initandlisten] server with --bind_ip 127.9.9.1 to disable this warning. 
CONTROL = [initandlisten] 
CONTROL = [initandlisten] 
CONTROL [initandlisten] ** MARNING; soft rlimits too low. Nunber of files is 256, should be ot least 1000 


随后 ， 通 过 集合 实例 db.customers 中 的 find0 方 法 可 检索 全 部 数据 。 数 据 的 检索 代码 
片段 如 下 所 示 。 

db .customers .find() .pretty () 

图 9.4 汇 总 了 在 集合 上 执行 的 整体 操作 。 

在 mongo shell 中 ，db 表示 为 引用 集合 的 引用 变量 。 相 应 地 ， 集 合 提供 了 某 些 公有 方 
法 ， 例 如 insert0、find0、drop0 等 。 这 也 体现 了 JSON 数据 基于 mongo shell 的 
接 下 来 将 使 用 代码 中 的 mongo 客户 端 模块 ， 并 通过 编程 方式 访问 集合 文档 。 
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> db.customers,insertC{"cust_id":1, "firstnane":"John", "lastnome":"Doe™, "Address":{"pincode": "900001", "street": "3305 Tennile", "city 
WriteResultC{ “nInserted 


} 
teResult({ "nInserted" ; 1 }) 


b,customers .find(),pretty() 


: 0bjectId("5a73e93236b515b8decde684")， 


900001" 
; "3305 Tenmile", 
"As 


图 94 
9.4 插入 一 个 JSON 文档 


与 SQL 写 操 作 相 比 ，NoSQL 写 入 操作 速度 更 快 。 这 是 因为 我 们 不 必 从 一 开始 就 维护 
任何 模式 及 其 相关 的 数据 类 型 。 
下 面 十 论 testnode-app， 并 实现 一 个 POST API 调用 ， 进 而 在 集合 中 设置 客户 的 
数据 。 相 关 步 骤 如 下 。 
(1) 之 前 曾 使 用 appjjs 文件 中 的 MongoDB 连接 实例 。 此 处 首先 移 除 appjs 中 的 下 列 
代码 片段 ， 并 将 代码 保存 在 临时 文件 中 ， 以 供 后 续 操 
const MongoClient = require('mongodb') .MongoClient; 
MongoClient .connect (constants .mongodb.url) 
.then(function() { 
console.log("Connected successfully to mongodb server") 
} 
.catch (function(err) { 


console.1og("Rn error occurred while connecting to mongodb!", err) 
1) 
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(2) 创建 新 的 中 间 件 , 使 用 现 有 的 db 连接 并 针对 特定 集合 进行 查询 。 对 此 , 在 pluginjs 
文件 中 添加 下 列 代码 。 


exports.mongoConnect = { 
register (server, options){ 
return MongoClient .connect (constants .mongodb.url) 
.then (function (client){ 
console.log("Connected successfully to mongodb server"); 
server.ext ('onRequest', (request, reply)=>{ 
request.dbInstance = client.db('test'); 
returnreply.continue; 
时 
return; 


}) 
.catch (function (err){ 
console.1log("RAn error occurred while connecting to mongodb!", err) 
return 
1 
}, 
name: "mongoConnect" 

} 

在 成 功 建立 连接 后 ， 可 将 数据 库 实例 保存 至 请 求 事件 中 ， 以 及 App 共享 的 请 求 单 例 
实例 中 。 

也 就 是 说 ， 将 db 实例 保存 至 request 中 。 这 里 ，dbInstance 提供 了 一 种 方式 ， 可 在 请 
求生 命 周 期 内 传递 和 使 用 同一 个 实例 。 接 下 来 , 我 们 将 在 下 一 步 创建 的 处 理 程序 中 使 用 该 
db 实例 。 

(3) 使 用 db 实例 并 通过 新 的 API 处 理 程序 查询 集合 测试 ， 这 可 视 为 http://localhost: 
3300/customer/add URL 上 的 POST 调用 。 下 列 内 容 显 示 了 可 配置 的 对 象 代 码 ， 并 于 随后 
插入 routes.js 中 。 

{ 

method: 'POST', 

path: "/customer/add' 

handler (request, h){ 
const dbInstance = request.dbInstance; 
const requestBody = request .payload; 
return dbInstance.collection('customer') 
.insert (requestBody) 


.then( (insertedstatus) =>{ 
return "customer added successfully"; 
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3 
Catch( (err) =>{ 
return new Error(err); 


得 


当 customer 的 集合 实例 时 ， 我 们 使 
(4) 准备 POSTMAN 或 


了 insert() 方 法 存储 负 


载 中 的 请 求 数据 。 
他 REST 客户 端 中 的 请 求 数据 。 请 求 数据 的 相关 格式 如 下 
所 示 。 
{ 
"firstname": "Bron"™, 
"lastname": "Dave", 


"Address": { 
"pincode": 123456, 


"street": "Thirtymile", 
oD A : "LC™ 


} 

} 

在 REST 客户 端 App 或 者 POSTMAN 浏览 器 扩展 中 ， 访 问 API 端点 
9.5 所 示 。 


省 点 ， 响 应 结果 如 图 
http://localhost:3300/customer/add 


3 ,GURLpaams | @ Headers(1) 
Content-Type application/ison 
Heacer 


form-data = x-www-form-urlencoded © raw | JSON ~ 
{ 
"firstname": 
lastname": 
Address" 


"John", 
Doe”, 


"pincode": "999691" , 
"street": "3395 Tenmile" 
city": :LA 
} 
} 


| 


oov 


Add to collection 


BIL or WH" 


Prety Raw Preview 本 


customer added successfully 
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确保 接收 到 的 响应 状态 代码 为 200， 其 中 包含 了 成 功 消息 ， 同 时 表示 操作 已 经 完成 。 
9.5 检索 JSON 文档 


通过 所 选集 合 上 的 find0 方 法 ， 可 执行 相应 的 检索 操作 。 相 应 地 ， 此 处 将 继续 添加 客 
户 功 能 ， 并 在 成 功 响 应 时 提供 已 添加 客户 的 列表 来 执行 此 项 操作 。 对 此 ， 考 查 下 列 代码 。 


{ 
method: 'POST', 
path: '/customer/add', 
handler (request, h)f{ 
const dbInstance = request.dbInstance; 
const requestBody = request .payload; 
const customerCollection = dbInstance.collection('customer'); 
return customerCollection.insert (requestBody) 
.then( (insertedstatus) =>{ 
return customerCollection.find!( 
{}) 


.toArray () 
.then( (customerList) =>{ 
return 1{ 
message: "customer added successfully", 
customerList 


} 
}) 
}) 
Catchl( (err) =>{ 
return new Error (err); 
i 
} 
} 


针对 上 述 代 码 片段 ， 需 要 注意 以 下 几 点 内 容 。 
口 ” 当 采用 空 对象 作 为 参数 时 ，find() 方 法 将 返回 所 有 已 出 现 的 选择 结果 。 在 当前 示 
例 中 为 客户 信息 。 
口 ”使 用 cursortoArray() 方 法 将 结果 数据 转换 至 一 个 数组 中 。 
0 读者 可 访问 https://docs.mongodb.com/manual/reference/method/js-cursor/ 以 查看 更 
多 游标 ( cursor ) 方法 。 


这 里 ， 游 标 是 指向 结果 或 引用 的 指针 。find0 方 法 返回 对 结果 的 引用 ;在 执行 游标 方 


起 汪 放 二 


JavaScript 与 JSON 从 入 门 到 精通 (第 2 版) 


法 时 ， 可 从 中 析 取 相关 数据 。 
口 最 后 返回 一 个 有 效 对 象 ， 其 中 包含 了 成 功 消息 和 customerList 数据 。 
最 终结 果 如 图 9.6 所 示 。 


http//ocalhost:3300/customer/add 4 GURLparams | @ Headers (1) 


Content-Type 


EE re mtoooecion 


Body 


EI or EC 


Pety Raw Preview 于 | 计 | JSON xML 


r added successfully”, 


8672d9669819c58c5" 
ohn 


Toee 。 
ev “996991 
3385 Tennile 


图 9.6 


9.6 MongoDB 中 基于 JSON 的 模式 


在 应 用 程序 


发 之 前 ， 可 能 需要 使 用 数据 库 的 模式 。 或 者 ， 如 果 我 们 希望 针对 全 部 数 


据 集 设置 数据 类 型 ， 情 况 又 当 如 何 ? 


此 时 ， 我 们 扩 


| 算 构 建 和 验证 NoSQL 数据 。 针 对 于 此 ， 我 们 需要 寻找 一 种 框架 ， 它 提 


供 了 一 个 围绕 mongodb 的 包装 器 。 
mongoose 是 一 个 领先 的 第 三 方 框架 ， 它 提供 了 所 有 基于 模式 的 验证 、 虚 拟 属性 等 。 
接 下 来 将 讨论 如 何 利用 mongoose 准备 和 验证 基于 JSON 的 模式 ， 相 关 步 骤 如 下 。 
(1) 通过 npm 命令 安装 mongoose， 如 下 所 示 。 


npm install 


mongoose --save 


(2) 考虑 到 将 在 应 用 程序 中 实现 mongoose， 因 而 可 采用 mongoose 提供 的 包装 器 方法 


连接 MongoDB。 
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简单 地 注释 掉 pluginsjjs 中 的 mongodb 客户 端 并 包含 以 下 内 容 。 
const MongoClient = require('mongoose'); 


这 将 在 MongoClient 常量 中 分 配 mongoose 模块 方法 。 除 此 之 外 ， 另 一 个 细微 的 变化 


则 是 无 须 设 置 请 求 上 的 dbInstance，mongoose 为 我 们 完成 了 全 部 工作 。 接 下 来 需要 注释 掉 
server.ext 事件 监听 器 ， 如 下 所 示 。 


/太太 

SerVer .ext ('onRedquest '， (request, reply)=>{ 
request .dbInstance = client.db('test'); 
return reply.continue; 

二 


(3) 在 mongoose 中 ， 模 式 提供 了 mongodb 模型 的 蓝图 。 它 们 作为 一 种 结构 ， 以 一 致 


性 的 方式 保存 传 入 的 集合 数据 。 下面 将 在 一 个 新 文件 modeljs 中 为 客户 数据 库 创 建 一 个 简 
单 的 模式 ， 如 下 所 示 。 


const mongoose = require('mongoose'); 
module.exports.customers = mongoose.model('customers', { 
"firstname": String, 
"lastname": String, 
"Address": { type: mongoose.schema.ObjectId, ref: 'customers address' 
} 
9 
const Address = mongoose.model('customers address', { 
"pincode": Number, 
"street": String, 
"elty er Strindg 
1 


上 述 代码 针对 customer 集合 创建 了 一 个 customers 模型 。 就 RDBMS 来 说 ， 我 们 针对 


客户 表 创建 了 一 个 客户 模式 。 随 后 可 利用 数据 类 型 属性 集合 (例如 类 型 、 引 用 、 默 认 值 等 ) 
填充 键 , 例如 地 址 。 或 者 ， 也 可 简单 地 定义 数据 类 型 ,例如 上 述 代码 片段 中 的 firstname 键 。 


需要 注意 的 是 ， 这 里 设置 了 一 个 Address 引用 类 型 。 通 过 使 用 数组 或 引用 数据 类 型 ， 


mongoose 还 支持 模式 的 嵌 套 。 在 上 述 示例 中 ， 我 们 采用 了 类 型 引用 。 


四 


接 下 来 ， 分 配给 每 个 键 的 数据 类 型 仅 是 定义 它 的 方法 ， 而 不 是 执行 实际 验证 的 方法 。 
此 ， 如 果 作 为 一 个 字符 串 发 送 pincode， 它 将 会 被 保存 ;但 如 果 作为 布尔 值 发 送 定义 完 


毕 的 pincode， 并 在 有 效 载荷 中 为 pincode 请 求 一 个 字符 串 ， 这 将 抛 出 一 个 类 型 转换 错误 。 
当 验 证 pincode 时 ， 可 向 customer address 模型 添加 一 个 简单 的 验证 器 ， 如 下 所 示 。 
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module.exports.customers address = mongoose.model('customers address', { 
"pincode": { 
type: Number, 
validate: { 
validator: function(v) { 
return ‘${v}'* .length === 6; 
}, 
message: '{VALUE} is not a valid pincode!' 
} 
}, 
"street": String, 
"cify": SEring 
nD; 


-种 较 常 使 用 的 验证 类 型 是 自 定义 验证 器 方法 。 其 间 ， 只 需 传递 一 个 函数 ， 该 函数 返 


回 传 入 的 pincode 编号 的 真 值 ， 验 证 工作 随即 完成 。 在 上 述 示例 中 ， 我 们 检测 了 输入 的 
pincode 值 (v) 的 长 度 是 否 为 6， 和 否则 将 抛 出 一 个 错误 ， 以 表示 未 满足 当前 条 件 。 这 里 ， 
甚至 可 以 使 用 message 键 定制 错误 消息 。 


中 完 


(4) 最 后 ， 利 用 module.exports 导出 客户 的 集合 模式 ， 以 供 后 续 操 作 使 用 。 
(5) 一 切 顺利 后 , 即 可 构造 控制 器 , 以 便 处 理 输入 和 输出 数据 。 此 类 操作 将 在 routesjs 
成 ， 如 下 所 示 。 


| 
method: 'POST', 
path:'/customer/add', 
handler (request, h) { 
const requestBody = request .payload; 
return (async ()=>{ 
try{ 
/大友 
* Native mongodb code 
* ConstdbInstance = request.dbInstance; 
* ConstcustomerCollection = dbInstance.collection('customer'); 
* return customerCollection.insert (requestBody) 
支 友 / 
const customersModel = models.customers; 
const customersModelInstance = new models.customers (equestBody) 
let error = new 
models.customers address (requestBody.Address) .validateSync() 7 
if (error) 
return Boom.boomify(error, { statusCode: 422 }); 
await customersModelInstance.save(); 
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Const customerList = await customersModel .find({}); 


return 1{ 
message: "customer added successfully", 
customerList 

}; 


}catch(e){ 
throw Boom.boomify(e, { statusCode: 500 }); 
} 
A 
} 
} 
其 中 ，JavaScript 对 象 表示 为 路 由 的 配置 信息 ， 并 由 请 求 方法 、 请 求 URL， 以 及 构造 
保存 数据 逻辑 的 方法 〈 称 作 处 理 程序 ) 构成 。 
下 面 对 上 述 代码 逐一 分 析 。 
口 Models.customers 提供 了 客户 模式 实例 ， 它 是 由 所 有 可 以 在 请 求生 命 周 期 中 使 用 
的 mongoose 方法 构建 的 原型 。 在 当前 示例 中 ， 我 们 采用 了 find0 方 法 。 
口 当 同 一 Models.customer 采用 新 的 关键 字 和 负载 作为 参数 实例 化 时 ， 所 接收 的 实 
例 将 提供 有 效 的 负载 ， 以 及 负载 操作 方法 ， 例 如 save0、update0) 或 delete()。 
口 采用 validateSync() 方 法 对 pincode 进行 验证 。 在 当前 示例 中 , 该 操作 呈 异 步 状态 。 
对 于 异步 代码 ， 可 简单 地 使 用 基于 回调 的 validate() 方 法 。 
口 ”此 处 利用 工具 库 Boom 处 理 错误 响应 ， 这 也 是 hapi 强烈 推荐 的 一 种 方式 。 


0 关于 Boom 的 更 多 信息 ， 读 者 可 访问 https://github.com/hapijs/boom。 


口 考虑 到 代码 本 质 上 呈 异 步 状 态 , 因而 可 通过 async-await 对 其 进行 处 理 。 正如 hapi 
V17 所 述 ， 这 将 是 一 种 完全 的 异步 /等 待 端 到 端 行为 。 这 里 ， 异 步 / 等 待 是 框架 间 
处 理 异 步行 为 的 一 种 最 新 方式 ， 并 可 生成 更 加 简洁 的 代码 。 
口 最 后 ， 向 hapi 处 理 程序 返回 了 一 个 自 调用 函数 。 
接 下 来 开始 运行 App。 
针对 一 些 变化 内 容 ， 需 要 重新 启动 服务 器 。 对 此 ， 可 通过 CtrltC 快捷 键 终止 Terminal 
中 处 于 运行 状态 的 节点 服务 ， 并 使 用 npm start 对 其 再 次 启动 。 
除 此 之 外 ， 还 需要 准备 浏览 器 客户 端 POSTMAN 中 的 数据 ， 并 添加 集合 中 新 的 客户 
数据 ， 如 图 9.7 所 示 。 
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http://ocalhost:3300/customer/add 3 区 URLparams  @ Headars(!) 
Content-Type applicatiorVjson 


form-data x-www-form-urlencoded 


| Send [Te 


ED HE 


Raw Proviow 下 计 JSON XML 


"message": "customer added successfully", 


图 :97 
0 关于 mongoose， 读 者 可 访问 http://mongoosejs.com/docs/guide.html 以 了 解 更 多 
自 


信息 。 
9.7 本 章 小 结 


我 们 正在 成 为 一 名 JavaScript 全 栈 开 发 人 员 ， 并 领略 了 不 同 Web 开发 领域 中 的 JSON 
实现 。 本 章 主要 介绍 了 NoSQL 数据 库 脚本 机 制 ， 其 间 讨论 了 MongoDB 的 配置 、BSON、 
MongoDB 集合 上 的 基本 操作 ， 以 及 对 和 象 -模型 框架 Mongoose。 

第 10 章 将 继续 讨论 JSON 的 实现 ， 即 针对 应 用 程序 开发 自动 化 脚本 或 任务 管理 器 。 
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当今 ， 单 元 测试 、 代 码 集成 和 创建 可 部 署 的 优化 版 本 等 阶段 均 是 应 用 程序 开发 生命 周 
期 的 主要 部 分 。 考 查 GitHub 上 的 代码 存储 库 : 在 使 用 任何 库 或 模块 之 前 ， 社 区 会 查找 测 
试用 例 〈 特 别 是 specjs 文件 ) 和 构建 状态 百分比 〈 是 通过 还 是 失败 )。 很 明显 ， 如 果 缺 少 
这 样 的 校 验 和 任务 , 开发 人 员 将 无 法 为 应 用 程序 模块 的 稳定 性 和 性 能 提供 基准 。 本 章 主要 
涉及 以 下 主题 。 
口 任务 管理 器 的 含义 及 其 使 用 原因 。 
口 gulpjs 的 含义 及 其 功能 。 
口 利用 Mocha 框架 和 gulpjjs 执行 单元 测试 。 
口 利用 JSON 配置 自动 化 全 部 单元 测试 用 例 。 
下 面 将 逐一 加 以 讨论 。 


10.1 任务 管理 器 的 含义 


在 Web 脚本 上 下 文 环境 中 ， 任 务 管理 器 是 一 类 库 ， 以 帮助 我 们 方便 地 执行 某 些 功能 ， 
并 最 小 化 工作 量 ， 有 具体 如 下 。 

口 “缩减 客户 端 应 用 程序 JavaScript 文件 以 提高 总 体 性 能 。 

口 在 构建 时 配置 应 用 程序 模块 选择 方案 。 

口 在 一 条 命令 上 构建 一 个 版 本 ， 且 仅 包 含 单一 index.html 文件 、CSS、 资 源 数 据 以 

及 简化 的 JavaScript。 

口 测试 BDD (行为 驱动 数据 (Behavior Driven Data，BDD)) 断言 。 

本 章 将 利用 Nide 的 默认 断言 库 分 别 测试 API， 并 通过 gulp 任务 管理 器 库 对 其 实现 自 
动 化 。 在 第 9 章 中 ， 曾 在 hapi 应 用 程序 中 创建 了 两 个 API， 接 下 来 将 对 其 进行 测试 。 在 创 
建 任务 之 前 ， 下 面 首先 讨论 gulpjs 及 其 用 途 和 功能 。 


10.2 gulp.js 简介 


基本 上 讲 ，gulpjs 是 一 个 JavaScript 任务 管理 器 。 前 面 列 出 的 所 有 任务 都 可 使 用 gulp.js 
执行 ,包括 打包 文件 、 在 编码 后 保存 文件 时 自动 刷新 浏览 器 、 运 行 单元 测试 文件 ， 以 及 利 
Amazon API 进行 部 署 。gulpjs 可 执行 很 多 重复 性 和 枯燥 的 任务 。 
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“gulp 是 一 个 工具 箱 ， 用 于 在 开发 工作 流 中 自动 执行 某 些 复杂 、 耗 时 的 任务 ， 从 而 可 


节省 开发 人 员 的 大 量 时 间 ”。 


——gulpjs.com 


下 面 考查 特征 列表 ， 并 揭示 gulpjs 为 何如 此 受到 大 家 的 欢迎 与 开源 市 场 上 的 其 他 


库 相 比 ， 例 如 gruntjs)。 


口 针对 任务 实现 的 小 型 插件 结构 。 
口 易于 阅读 、 理 解 任务 。 

口 可 集成 任务 并 执行 自动 化 操作 。 
口 


全 部 IO 操作 均 通 过 nodejs 流 执行 ， 


因此 ， 全 部 更 改 内 容 首 先 在 内 存 中 完成 ， 随 


后 一 次 性 写 入 端点 ， 进 而 使 速度 和 性 能 得 到 较 大 的 提升 。 
口 较 好 的 通信 支持 和 插件 生态 环境 。 
接 下 来 考查 gulpjs 的 安装 过 程 ,随后 讨论 gulpjjs 的 编码 机 制 。gulpjs 的 安装 步骤 如 下 。 
(1) 在 项 目的 根 目 录 中 创建 名 为 gulpfilejs 的 gulp 配置 文件 ， 这 将 有 助 于 在 根 目录 中 
管理 项 目 文件 。 在 当前 示例 中 ，hapi App (Cnode-tes-app 目录 ) 和 gulp 配置 文件 将 位 于 同 
-级 别 ， 因 此 第 10 章 曾 创 建 了 此 类 文件 夹 ， 读 者 可 访问 GitHub 存储 库 予 以 查看 ， 对 应 网 
址 为 https://github.com/bron10/json-essentials-book。 

(2) 利用 下 列 命令 安装 全 部 所 需 的 数据 包 。 

$ npm install gulp-cli -g 

$ npm install gulp --save-dev 
其 中 ，gulp-cli 数据 包 可 在 命令 行 界面 中 使 用 gulp。 待 安装 过 程 完毕 后 ，gulpfilejs 将 
处 于 就 绪 状 态 ， 下 面 开始 于 其 中 编写 代码 。 


10.3 ”在 gulp.js 中 创建 任务 


本 节 将 创建 第 一 个 任务 ， 即 用 户 欢迎 画面 ， 相 关 步 骤 如 下 。 
编写 插件 代码 ， 如 下 所 示 。 
const gulp = require('gulp'); 
gulp.task('default', () => { 

console.log("Greetings to Readers!"); 


(1) 首先 在 gulpfilejs 


nm 


在 上 述 代码 片段 中 ，gulp 模块 的 task0 方 法 需要 使 
个 参数 为 字符 串 ， 第 二 个 参数 表示 为 一 个 加 


到 两 个 参数 。 其 中 ， 任 务 的 第 一 


调 ， 并 可 于 其 


中 编写 特定 任务 背后 的 实际 迪 辑 


第 10 章 利用 JSON 配置 任务 管理 器 “125 。 


内 容 。 
(2) 返回 至 Terminal 并 运行 gulp 命令 ， 对 应 输出 结果 如 图 10.1 所 示 。 


Last login: Mon Feb 19 12:45:11 on ttys009 
brunos-MacBook-Pro:chapter 19 bruno$ gulp 
[ 3:03] Using gulpfile 

ik 3:03] Starting 'default' 


Greeting Readers! 
[17:13:03] Finished 'default' after 
brunos-MacBook-Pro:chapter 19 bruno$ 


图 10.1 
接 下 来 添加 另 一 项 任务 ， 并 将 其 用 作 上 一 任务 的 依赖 项 ， 如 下 所 示 。 
const gulp = require('gulp'); 
gulp.task('default', ['dependent-task'], () => { 


console.log ("Greetings to Readers!"); 
} 


gulp.task("'dependent—task', () => { 
console.1log ("Greetings to all!"); 


(3) 当 利 用 gulp 执行 上 述 代码 时 ， 对 应 输出 结果 如 图 10.2 所 示 。 


brunos-MacBook-pPro:chapter 10 bruno$ gulp 
| ] Using gulpfile 

[ ] Starting 'dependen 

Greetings to alll! 

[ 


3] Finished "dependent-task' after 
[ 3] Starting 'default 
Greetings to Readers 
| ] Finished ‘default' after 
brunos-MacBook-Pro:chapter 10 bruno$ 


图 102 


在 图 10.2 所 示 的 输出 结果 中 ,dependent-task 在 default 任务 之 前 运行 ,这 可 通过 网 10.2 
得 到 验证 ， 即 查看 console.log0 方 法 所 记录 的 语句 顺序 。 这 也 证 实 了 可 以 采用 依赖 任务 的 
策略 按 顺 序 执行 任务 。 

接 下 来 将 讨论 以 下 内 容 。 
口 针对 某 个 API 编写 一 个 单元 测试 。 
口 利用 gulp 运行 API 单元 测试 。 
hapi App 提供 了 API 端点 (第 9 章 曾 对 此 有 所 介绍 )。 这 里 , 应 确保 MongoDB 和 Node 
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app.js 均 处 于 运行 状态 。 接 下 来 编写 一 个 简单 的 单元 测试 , 以 生成 调用 并 对 数据 进行 检测 。 

单元 测试 用 例 将 对 具有 特定 功能 的 代码 单元 进行 测试 。 在 当前 示例 中 , 将 测试 一 个 简 
单 的 路 由 或 hapi App。 这 里 ， 单 元 测试 用 例 任 务 将 被 划分 为 多 个 测量 代码 块 ， 以 便 可 清晰 
地 编写 单元 测试 用 例 。 

(1) 创建 routes.specjs 文件 。 此 处 ， 命 名 规则 指定 了 将 要 测试 的 文件 routes.js。 开 源 
社区 建议 ， 应 将 测试 文件 以 spec 作为 后 级 。 

(2) 根据 routingjs 中 出 现 的 所 有 路由 六 划分 元 测试 用 例 ， 并 将 断言 封装 在 某 些 测 
试 驱动 的 代码 中 。 此 处 ，npm 模块 mocha.jjs 可 帮助 我 们 完成 这 一 项 任务 。 顺 使 说 一 下 ， 
编写 一 组 代码 来 完成 ， 并 通过 测试 用 例 被 称 为 测试 驱动 Ff 发 (Test Driven Development, 
TDD )。 

(3) 利用 下 列 命令 安装 mocha。 

npmi mocha --save-dev 

(4) 当 指 定单 元 用 例 时 ， 需 要 包含 spec 文件 中 的 代码 ， 如 下 所 示 。 


describe('Test routes', () => { 
it('Testing GET: greetings', () => { 
console.1log("Testing the /greeting route"); 
}) 
}) 


(5) 运行 mocha 测试 命令 ， 如 下 所 示 。 
$ ./node modules/mocha/bin/mocha routes.specs.js 
(6) 对 应 输出 结果 如 图 10.3 所 示 。 


brunos-MacBook-Pro:chapter 10 bruno$ ./node_modules/mocha/bin/mocha routes.specs.js 


Test routes 
Testing the /greeting route 


Ea 


1 passing 
图 103 
此 处 ,我 们 准备 了 相应 的 代码 块 ， 以 便 能 够 使 用 相关 的 测试 场景 。 另 外。 运行 单元 测 
试 规范 文件 的 命令 看 起 来 过 于 宛 长 ,并 可 对 其 稍 作 修改 , 即 在 根 级 别 添加 /调整 package.json 
文件 中 的 script 键 ， 如 下 所 示 。 
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mcrapta™ 4 
"test": "./node modules/mocha/bin/mocha routes.specs.js" 


} 

(1) 在 Terminal 中 运行 npm test 命令 。 

0 关于 Mocha 的 更 多 内 容 ， 读 者 可 访问 https://mochajs.org/#getting-started。 

接 下 来 将 使 用 一 个 更 好 的 库 , 可 以 在 执行 test 文件 时 请 求 当前 API, 对 此 , 可 采用 npm 
库 中 的 请 求 节点 模块 。 

(2) 运行 下 列 命令 。 

npm install request --save-dev 

(3) 包含 routes.spec.js 中 的 请 求 模块 ， 如 下 所 示 。 

const request = require('request'); 

(4) 请 求 模块 实例 可 满足 完成 异步 HTTP 请 求 所 需 的 各 项 要 求 。 目 前 , 我 们 的 最 小 需 
求 是 请 求 URL、 一 个 请 求 方法 和 处 理 响 应 的 回调 ， 如 下 所 示 。 


const request = require('request'); 


describe('Test routes', () => { 
it('Testing GET: greetings', () => { 
console.log("Testing the /greetings route"); 
request.get ('http://localhost:3300/greetings', (err, 
httpResponse,body) => { 
Te MEY 
throw err; 
console.log("statusCode", httpResponse.statusCode); 
console.1log("body", body); 
done(); 


}) 
}) 
(5) 运行 npm test 命令 ， 对 应 输出 结果 如 图 10.4 所 示 。 
需要 注意 的 是 ， 当 前 我 们 接收 到 的 statusCode 为 200，body 为 hello readers。done 参 
数 表示 为 一 个 函数 ,用 于 运行 异步 代码 的 mocha。 当 异步 代码 执行 完毕 后 ,需要 调用 done 
函数 ， 即 调用 异步 请 求 回调 中 的 done 函数 。 
接 下 来 将 介绍 node.js API 提供 的 断言 库 。 这 里 ， 断 言 提供 了 一 种 方式 可 区 分 期 望 数 


。128 。 JavaScript 与 JSON 从 入 门 到 精通 〈 第 2 版 ) 


brunos-MacBook-Pro: chapter 19 bruno$ npm test 


> gulp-file@1.0.9 test /Users/bruno/Documents/projects/js/book/json essential/codes/chapter 10 
> ./node_modules/mocha/bin/mocha routes.specs.js 


Test routes 


Testing the /greetings route 
V r 


1 passing 


statusCode 200 
body hello readers 


图 10.4 


据 和 实际 数据 。 当 在 开发 过 程 中 使 用 断言 时 ， 可 针对 应 用 程序 运用 BDD 测试 方法 ， 从 而 
缩减 开发 阶段 中 bug 的 范围 。 下 列 代码 显示 了 一 些 断 言 。 


const request = require('request'); 
const assert = require('assert'); 


describe('Test routes', () => { 
it('Testing GET: greetings', (done) => { 
console.log("Testing the /greetings route"); 
request.get ('http://localhost:3300/greetings', (err 
httpResponse,body) => { 
if (err) { 
throw err; 


} 
assert .equal (httpResponse.statusCode, 200); 
assert.ok(body == 'hello readers'); 
done (); 
} 
} 
} 


上 述 代码 包含 了 Node API 提 0 块 。 其 中 ，assertequal() 方 法 用 于 检测 两 个 
操作 数 的 相等 :性 ， 在 当前 示例 中 ， 将 以 此 检测 响应 statusCode (利用 HITP 响应 的 期 望 状 
态 码 所 接收 )。 除 此 之 外 ， 它 还 将 作为 消息 接收 第 数 ， 并 在 断言 失败 时 予以 显示 。 
assert.ok0) 方 法 则 接收 一 个 真 值 作为 参数 ， 以 完成 有 效 的 断言 。 在 我 们 的 示例 中 ， 如 果 响 
应 体 无 法 以 hello reader 作为 响应 ， 则 断言 失败 。 

在 将 期 望 的 statusCode 输入 修改 为 400 后 ( 原 值 为 200)， 即 可 对 断言 失败 进行 测试 ， 
如 图 10.5 所 示 。 
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brunos-MacBook-Pro:chapter 10 bruno$ npm test 


> gulp-file@1.0.0 test /Users/bruno/Documents/projects/js/book/json essential/codes/chapter 10 
> ./node_modules/mocha/bin/mocha routes.specs.js 


Test routes 
Testing the /greetings route 


0 passing 


1) Test routes 


Testing GET: greetings: 


+ expected 


图 10.5 


当前 测试 用 例 已 准备 就 绪 。 类 似 地 ， 还 可 针对 /customeradd API POST 调用 编写 一 个 


API 单元 测试 ， 如 下 所 示 。 


it('Testing GET: customer/add', (done) => { 
console.1og("Testing the /customer/add route") 
let payload = { 
"firstname": "firstTest", 
"lastname": "lastTest", 
"Address": { 
"pincode™: L11111, 
"street": "testmile", 
WDEY Ten 
} 
}; 


request .post ({ 
url: ‘http://localhost:3300/customer/add, 
json: payload 

hr (srry httpResponses Dody) => 4 
了 E (err) { 


0s 
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throw err; 

} 

const filteredCustomerList = 

body.customerList.filter (function(customerData) { 
return (customerData.firstname == payload.firstnameg&& 
customerData.lastname == payload.1lastname) 


} 


assert.equal (httpResponse.statusCode, 200); 
//The data inserted above should have atleast one customer instance 


assert.ok (filteredCustomerList.length> 1); 
done (); 
和 

} 


assert .equal (httpResponse.statusCode, 200); 
//The data inserted above should have atleast one customer instance 


assert.ok (filteredCustomerList.length> 1); 
done (); 
}) 


}) 


在 上 


现 一 个 


:个 断言 表明 ， 至 少 应 


述 代码 片段 中 ,我 们 已 经 了 解 了 第 一 个 断言 


实例 (使 用 API 端点 插入 客户 列表 集合 中 )。 在 这 一 场合 下 , 该 实例 将 匹配 于 客户 实例 ( 通 


过 firstname 和 lastname 获取 )。 
运行 上 述 代 码 ， 将 得 到 如 图 10.6 所 示 的 结果 ， 表 明 两 个 测试 均 已 通过 。 


brunos-MacBook-Pro: chapter 19 bruno$ npm test 


> gulp-file®1.0.0 test /Users/bruno/Documents/projects/js/book/json essential/codes/chapter 10 
> ./node_modules/mocha/bin/mocha routes.specs.js 


Test routes 


Testing the /greetings route 


Testing the /customer/add route 


2 passing 


图 10.6 


当前 ， 单 元 测试 已 准备 就 绪 ， 接 下 来 将 作为 单项 gulp 任务 对 其 进行 集成 ， 以 对 路 由 


进行 测试 。gulp 中 涵盖 了 一 个 较 好 的 插件 库 ， 对 于 集成 操作 ， 我 们 将 使 用 gulp-mocha， 并 


可 通过 


下 列 命 令 安装 。 
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npm install gulp-mocha --save-dev 
此 处 将 重点 讨论 gulpfilejs 并 创建 一 项 新 任务 ， 如 下 所 示 。 


gulp.task('test-routes', function() { 
return gulp.src('./routes.specs.js') 
-pipe (mochaPlugin({ reporter: "spec' })) 
]) 


当 使 用 mochaPlugin 时 ， 需 要 将 其 包含 在 gulpfilejs 的 开始 处 ， 如 下 所 示 。 

const mochaPlugin = require('gulp-mocha'); 

需要 注意 的 是 ， 此 处 使 用 了 pipe0 方 法 ,该 方法 可 高 效 地 将 spec 文件 的 源 数据 流传 递 
至 mochaPlugin 中 ， 以 便 执行 当前 测试 。 

当 运 行 gulp test-routes 命令 时 ,单元 测试 通过 gulp 予以 执行 。 接 下 来 将 通过 依赖 项 策 
略 创建 一 些 自动 化 测试 。 


10.4 自动 化 测试 


通过 将 gulp 插件 和 gulp 任务 的 功能 集成 在 一 起 ， 可 以 创建 一 个 连续 的 任务 流 ， 这 些 
任务 流 可 以 根据 具体 需求 并 行 或 顺序 地 运行 。 在 前 述 gulp 任务 依赖 项 策略 的 基础 上 ， 我 
们 将 采用 npm run-sequence 模块 以 顺序 方式 运行 相关 任务 。 当 任务 数量 随时 间 增 加 时 ， 这 
将 有 助 于 结构 化 对 应 任务 ， 并 降低 问题 的 复杂 度 。 

运行 下 列 命令 安装 run-sequence。 

npm install run-sequence --save-dev 

就 应 用 方面 来 说 ， 需 要 注意 的 是 ， 每 项 gulp 任务 均 应 返回 一 个 流 或 Promise; 或 者 利 
日 回调 加 以 处 理 。 下 面 通过 在 流 中 创建 3 项 简单 的 任务 来 证 明 这 一 点 ， 并 利用 gulp 自动 
化 的 强大 功能 。 

(1) 启用 hapi APP。 

(2) 测试 haip App 的 API。 当 进行 测试 时 ， 确 保 test-node-app 目录 为 gulpfilejjs 的 根 
目录 。 另 外 ， 读 者 还 可 访问 https://github.com/bron10/json-essentials-book 以 了 解 更 多 内 容 。 

(3) 终止 hapiApp。 

此 类 任务 的 对 应 代码 如 下 所 示 。 


const gulp = require('gulp'); 
const mochaPlugin = require('gulp-mocha'); 


const runSequence = require('run-sequence'); 
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Var exec = require('child process') .exec; 
let processInstance = undefined; 


gulp.task('default', ['dependent-task'], () => { 
console.log("Greetings to Readers!"); 
}) 


gulp.task('dependent-task', () => { 
console.1og("Greetings to all!™"); 
Hy 


//Start our hapi app 

gulp.task('start-app', (cb) => { 
//Update the package.json for start script 
processInstance = exec(`npm start ); 
cb(); 

}) 


//Test the API of the hapi app 
gulp.task('test-routes', () => { 
return gulp.src('./routes.specs.js') .pipe (mochaPlugin({ reporter: 
'spec' })) 
1); 


//Stop the hapi app 
gulp.task('stop-app', (cb) => { 
processInstance.kill (0); 
process.exit (0); 
cb(); 
181 
gulp.task('Test-API-Flow', function() { 
return runSequence('start-app', 'test-routes', 'stop-app'); 
1); 


在 上 述 gulp 任务 中 , 我 们 利用 gulp 回调 参数 cb 完成 当前 任务 , 或 者 返回 一 个 流 。 这 
对 于 runSequence 函数 来 说 不 可 或 缺 , 以便 了 解 每 项 任务 在 下 一 项 任务 开始 之 前 均 已 完成 。 
下 面 逐 一 讨论 每 项 新 任务 。 
口 start-app: 该 项 任务 通过 运行 npm start 命令 启用 hapi 服务 器 实例 。 由 于 gulpfilejs 
处 于 在 终端 中 执行 命令 的 根 级 别 ， 因 而 该 命令 位 于 gulpfilejs 的 package.json 中 ， 
而 非 test-node-app 目录 。 另 外 ， 该 命令 还 使 用 了 nodejs API 提供 的 child_process 
模块 的 exec( 方 法 ， 并 可 为 生成 gulp 父 进程 的 最 新 子 进程 。 
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口 test-routes: 表示 为 测试 hapi API 路 由 的 gulp 任务 。 
口 stop-app: 关闭 两 个 进程 (应 用 程序 进程 和 gulp 进程 ) 的 gulp 任务 。 
口 Test-APILFlow: 该 gulp 任务 只 是 对 前 面 的 所 有 任务 进行 排序 。 


在 执行 之 前 ， 应 确保 未 运行 服务 器 实例 ， 并 确保 在 启用 gulp 进程 之 前 退出 其 他 
节点 进程 ( 尤其 是 hapi 服务 器 进程 ); 否则 将 会 产生 一 个 地 址 使 用 错误 


运行 gulp Test-API-Flow 并 查看 Terminal 中 的 自动 化 结果 ， 如 图 10.7 所 示 。 


brunos-MacBook-Pro: chapter 19 bruno$ gulp Test-API-Flow 
] Using gulpfil 
Starting 'Te: 
Starting 
Finished 
Starting 
Finished 


Test routes 
Testing the /greetings route 
V 


Testing the /customer/add route 


sing 


] Finished 
] Starting -apl 
brunos-MacBook-Pro: chapter 19 bruno$ 


10.5 ”gulp JSON 配置 


最 后 ， 本 节 将 利用 JSON 配置 gulp 任务 。 下 面 创建 一 个 名 为 gulpconfigjson 的 配置 文 
件 ， 该 文件 将 对 全 部 设置 、 源 以 及 任务 命名 予以 控制 。 尽 管 当前 bE -个 路 由 API 任务 
需要 测试 ， 但 最 好 在 高 级 阶段 启动 它 。 当 应 用 程序 API 增加 时 ， 将 很 难 在 应 用 程序 结构 
级 别 进行 修改 。gulpconfig 文件 内 容 如 下 所 示 。 


{ 
"apiflow": 
{ 
"name": "Test-API-FlOow", 
”sequence”: LI"start=app"; “testE=FOoUEes "stop=app"]l 
}, 
"routes": 
{ 


"name": "test-routes", 
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nsrc": "./routes.specs.js" 
3 
} 


修改 gulpfilejs 最 终 的 下 列 任务 。 


//Test the API of the hapi app 

gulp.task (gulpTasksConfig.routes.name, () => { 
return gulp.src(gulpTasksConfig.routes .src) .pipe (mochaPlugin({ 
reporter: "spec'"' })) 

Bs 


gulp.task (gulpTasksConfig.apiflow.name, function() { 
return runSequence(...gulpTasksConfig.apiflow.sequence); 

]) 

上 述 代码 使 用 了 配置 文件 的 gulpTaskConfig 实例 。 对 此 ， 应 确保 在 gulpfilejs 的 开始 
处 包含 了 下 列 内 容 。 

const gulpTasksConfig = require('./gulpconfig.json'); 

在 上 面 的 代码 中 ， 我 们 学 习 了 一 种 新 的 技术 ， 将 数组 值 作为 参数 隔离 于 runSequence 
函数 调用 之 上 。 对 应 的 操作 符 称 作 展开 操作 符 , 它 由 3 个 连续 的 点 构成 并 作为 配置 键 的 前 
级 。 展 开 操作 符 被 称 作 一 个 序列 并 提供 了 一 个 数组 。 


10.6 本 章 小 结 


对 于 JSON 的 研究 将 我 们 推 向 了 不 同 的 学 习 阶 段 。 本 章 讨论 了 单元 测试 和 自动 化 。 其 
间 ， 我 们 使 用 了 gulp.js 这 一 重要 的 任务 管理 器 工具 ， 同 时 还 考查 了 两 种 较为 重要 的 单元 
测试 概念 ， 即 基于 nodejs 断言 库 的 BDD 测试 ， 以 及 JavaScript App TDD 框架 mocha.js。 
这 里 , 我 们 也 强烈 建议 尽 可 能 多 地 进行 单元 测试 , 这 在 很 大 程度 上 减少 了 错误 出 现 的 
概率 ， 并 随 着 时 间 的 推移 提供 了 较 好 的 代码 可 维护 性 。 
“如 果 您 不 喜欢 对 产品 进行 单元 测试 ， 那 么 ， 您 的 客户 很 可 能 也 会 放弃 这 类 测试 ”。 
一 一 佚名 


第 11 章 将 讨论 实时 系统 和 分 布 式 系统 中 的 JSON 实现 。 
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截止 到 目前 ， 我 们 使 用 RESTful HTTP API 端点 作为 客户 端 和 服务 器 之 间 的 数据 通信 
源 。 事 实证 明 ，HTTP 请 求 是 获得 可 靠 数 据 可 用 性 的 最 佳 方式 。 如 果 存 在 网 络 延 迟 问题 ， 
唯一 的 障碍 便 是 响应 时 间 。 如 果 我 们 并 不 希望 等 待 服务 器 响应 , 或 者 我 们 需要 实时 接收 数 
据 ， 情 况 又 当 如 何 ? 考虑 以 下 场景 : 使 用 产品 机 器 人 进行 一 些 简 单 的 消息 传递 活动 , 或 者 
为 交付 给 工作 人 员 的 演示 文稿 进行 屏 播 。 在 这 种 情况 下 , 成 功 的 唯一 标准 是 数据 的 即时 可 
性 和 正确 性 。WebSocket 是 一 种 为 此 类 场景 提供 实时 解决 方案 的 Web 技术 协议 。 

另 一 个 较为 重要 的 事件 则 是 分 布 式 系统 。 一 旦 部 署 并 运行 了 Web 应 用 程序 ， 就 需要 
扩展 网 络 资源 以 实现 数据 一 臻 性， 并 提高 远程 节点 之 间 的 通信 质量 。 在 这 种 情况 下 ， 分布 
式 系 统 解决 方案 用 于 网 络 间 的 数据 管理 。 本 章 将 学 习 Apache Kafka, 它 提供 了 一 个 可 伸缩 
的 流 处 理 系统 。 

本 章 主要 涉及 以 下 主题 。 
基于 Socket.IO 和 JSON 的 实时 通信 。 
配置 SocketIO 服务 器 及 其 客户 端 。 
基于 Apache Kafka 和 JSON 的 分 布 式 系 统 简介 。 
安装 Apache 并 实现 实时 应 用 程序 中 的 分 布 式 系统 概念 。 


OOODO 


11.1 基于 SocketIO 的 JSON 


SocketIO 服务 器 的 配置 过 程 较为 简单 。 本 节 将 实现 一 个 实时 服务 器 ， 并 提供 连续 的 
HTTP 握手 ， 同 时 通过 SocketIO 框架 监听 请 求 。 

本 节 将 通过 一 个 pinboard 应 用 程序 描述 实时 JSON 的 实现 过 程 。 任何 连接 到 实时 服务 
器 的 匿名 用 户 都 可 以 加 入 会 话 ， 并 可 查看 pinboard， 同 时 添加 他 们 喜欢 的 内 容 。 

该 应 用 程序 涵盖 以 下 两 个 阶段 。 

(1) 设计 pinboard。 

(2) 通过 SocketIO 库 实现 实时 功能 。 


11.1.1 设计 pinboard 
本 节 将 设计 一 个 Web 界面 ， 据 此 ， 用 户 可 添加 或 查看 插 接 板 上 的 接口 。 回 忆 一 下 ， 
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第 7 章 曾 讨论 了 和 嵌入 模板 ， 此 处 将 采用 类 似 的 技术 实现 pinboard 程序 。 对 此 ， 首 先 创建 一 
个 名 为 index.htmljs 的 模板 文件 ， 并 添加 下 列 HTML 元 素 。 
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padding: 15px; 
float: left; 
width: 20%; 
} 
</style> 
<body> 
<textarea autocomplete="off" id="textData"></textarea><button 
id="postButton">Post</button> 
<div class="collection"> 
<div class="card"> 
<div class="container"> 
<p>LoremIpsum is simply dummy text of the printing and 
typesetting industry. Lorem Ipsum has been the industry's standard 
dummy text ever since the 1500s, when an unknown printer took a 
galley of type and scrambled it to make a type specimen book. It 
has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was 
popularised in the 1960s with the release of Letraset sheets 
containing Lorem Ipsum passages, and more recently with desktop 
publishing software like Aldus PageMaker including versions 
ofLorem Ipsum. 
</p> 
<h4><b>John Doe</b></h4> 
</div> 
</div> 
</div> 
</body> 
</html> 


; 


上 述 模板 涵盖 了 pinboard 应 用 程序 所 需 的 全 部 UI 元素 。 其 中 ， 我 们 导出 了 一 个 包含 


所 有 HTML 的 简单 字符 串 ， 例 如 ， 作 为 输入 元 素 的 textarea; 包含 文本 Post 作 为 操作 元 
素 ) 的 按钮 ， 以 及 在 插 板 上 添加 接口 和 卡片 的 collection 类 。 接 下 来 开始 配置 服务 器 ， 进 
而 在 浏览 器 请 求 处 显示 模板 。 


11.1.2 配置 Socket.IO 服务 器 


WebSocket 实现 通过 SocketIO 库 进行 封装 和 处 理 。Socket.IO 不 仅 是 一 个 库 ， 同 时 也 


是 一 个 框架 ， 从 而 提供 了 超出 库 范 围 的 更 多 特性 。 下 列 命 令 可 用 于 安装 Socket.IO。 


npm install socket.io --save 
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当前 ， 我 们 需要 根据 节点 服务 器 的 请 求 在 浏览 器 中 呈现 模板 。 针 对 于 此 ， 可 向 appjs 


后 


添加 下 列 代码 片段 。 


const templateData 


1D); 


= require('./index.html'); 

const server = require('http') .createServer((req, res) => { 
res.setHeader('content-type', 'text/html'); 
res.end (templateData); 


const io = require('socket.io') (server); 


io.on('connection', 


function (client) { 


client.on('disconnect', function() { 
console.log('user disconnected'); 


7); 


console.log("connected to realtime data server"); 


os 


server.listen(3400); 


当 在 浏览 器 中 访问 http://localhost:3400 时 ， 对 应 结果 如 图 11.1 所 示 。 


®9 SN pinboard 
< C © localhost 


国 cooja 


Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the 
industry's standard dummy text ever since the 1500s, 
When an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has 
survived not only five centuries, but also the leap into 


electronic typesetting, remaining essentially 
unchanged. It was popularised in the 1960s with the 
rcleasc of Letrasct sheets containing Lorem Ipsum 
passages,and more recently with desktop publishing 
software like Aldus PageMaker including versions of 
Lorem Ipsum. 


下 面 将 对 上 述 代码 进 
点 模块 ， 并 可 导出 基于 字 4 


J 逐 
wx 
守 串 


John Doe 


图 11.1 


一 解释 。 此 处 导入 了 index.htmljs 模板 ， 这 是 一 个 简单 的 节 
的 HTML 数据 。 随 后 ， 我 们 创建 了 一 个 HITP 服务 器 ， 并 
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通过 Web 浏览 器 或 其 他 显示 HTML 视图 的 客户 端 处 理 HTTP 请 求 和 响应 。 
在 将 服务 器 实例 传递 至 所 需 的 SocketIO 库 后 , 此 处 创建 了 一 个 实时 服务 器 .SocketIO 
是 当前 实时 应 用 程序 的 原始 库 , 它 为 WebSocket 提供 了 一 个 包装 器 ; 而 WebSocket 是 一 种 
通过 传输 控制 协议 (Transmission Control Protocol，TCP) 执行 连续 通信 握手 的 协议 。 
简单 地 讲 , 一 旦 客户 端 构建 了 与 WebSocket 服务 器 间 的 连接 , 客户 端 每 次 不 必 生 成 特 
定 的 请 求 以 获取 特定 的 数据 。 一旦 建立 了 对 连接 的 第 一 个 请 求 ， 客户 端 就 可 以 接收 与 时 间 
〈 循 环 和 发 送 )》 和 任何 其 他 事件 触发 器 相关 的 连续 数据 。 客 户 端 或 服务 器 只 需要 触发 一 个 
事件 来 传递 数据 ， 并 通过 回调 监听 以 接收 数据 。 人 订阅 模式 加 以 使 用 ， 
或 者 更 具体 地 说 , 使 用 监听 器 。 上 述 代码 中 设置 了 两 个 监听 器 , 即 connection 和 disconnect。 
通过 下 面 的 代码 片段 ， 我 们 将 更 准确 地 理解 这 些 内 容 。 在 appjs 中 ， 将 添加 名 为 
connection 的 新 监听 器 ， 它 将 监听 断 开 连接 事件 ， 如 下 所 示 。 
io.on('connection', (client) => { 
console.1log("connected to realtime data server"); 
client.on('disconnect', () => { 
console.log("R user is disconnected!"); 


1) 
这 


11.1.3 配置 Socket.IO 客户 端 


通过 添加 一 个 客户 端 脚本 ， 我 们 将 被 客户 端 index.htmljs 连接 至 Socket.IO 服务 器 上 ， 
如 下 所 示 。 

<script src="/socket.io/socket.io.js"></script> 

<script> 

const socket = io(); 

</script> 

此 处 在 <body> 标 签 结尾 后 添加 了 <scrip 人 标签 。socketiojs 在 调用 io 原型 方法 时 处 理 
与 服务 器 的 连接 。 默 认 状态 下 ， 它 利用 与 提供 给 浏览 器 的 套 接 字 文件 相同 的 URL 建立 连 
接 ; 除 此 之 外 ， 它 还 提供 了 一 个 选项 并 可 采用 不 同 的 方式 设置 连接 URL， 即 将 其 作为 一 
个 URL 字符 串 参数 进行 传递 。 

在 实现 了 connection 和 disconnect 监听 器 之 后 , 客户 端 也 将 被 连接 。 当 刷新 浏览 器 时 ， 
将 得 到 以 下 输出 结果 。 


connected to realtime data server 
A user is disconnected! 
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接 下 来 将 添加 相关 功能 项 ， 以 便 可 捕捉 用 户 输入 内 容 ， 并 将 其 置 于 pinboard 上 。 这 里 
将 使 用 jQuery 库 ， 以 简化 与 UI 相关 的 代码 。 简 单 地 讲 ，jQuery 是 一 个 客户 端 -脚本 JavaScript 
库 ， 并 可 方便 地 操控 DOM 元 素 。 对 此 ， 可 通过 下 列 代码 包含 jQuery 库 。 

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" 

integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" 

crossorigin="anonymous" /> 

注意 ， 上 述 代 码 须 置 于 自 定义 脚本 标签 之 上 ， 进 而 可 访问 jQuery 的 全 局 变量 $， 以 供 
全 部 方法 使 用 。 

至 此 ， 我 们 对 事件 监听 器 的 工作 原理 有 了 一 定 的 了 解 。 接 下 来 将 确定 监听 器 的 数量 ， 
以 及 根据 何 种 条 件 满足 下 列 决策 。 

(1) 明确 数据 流 的 方向 。 对 于 单 路 或 双 路 通信 ， 这 可 以 通过 从 浏览 器 文本 区 域 捕获 输 
入 数据 并 将 其 发 送 到 服务 器 来 发 现 这 一 点 。 服 务 器 可 对 数据 执行 持久 化 操作 (当前 仍 为 临 
时 存储 )， 并 将 其 发 送 至 所 有 已 订阅 的 客户 端 (浏览 器 )， 这 可 通过 下 列 代 码 加 以 描述 。 

//index.html .js 


$ (function() { 
const socket = io(); 


$("#postButton") .on('click', function(e) { 
let textData = $("#textData") .val (); 
let writtenBy = $("#writtenBy") .val (); 
socket .emit ('new-pin', { story: textData, writtenBy: 
writtenBy }); 
$("#textData") .val (''); 
$ ("#writtenBy") .val (''); 
return false; 

}) 

socket .on('append-to-list', function(data) { 
console.log("data", data); 
$('.collection') .append('<div class="card"><div 
class="container"><p>' + 
data.story + '</p><h4><b>' + data.writtenBy + '</b></h4> 
</div></div>') 

l 

}) 


上 述 代码 利用 postButton 的 id 在 元 素 上 绑 定 了 一 个 单 击 事件 ， 即 一 个 HTML 按钮 。 
随后 ， 我 们 使 用 new-pin 作为 通道 ， 并 从 输入 内 容 中 提取 数据 ， 例 如 名 称 以 及 通过 
WebSocket (ws:/) 协议 发 布 和 发 出 的 文本 。 其 间 ， 预 计 将 创建 一 个 订阅 器 ， 并 监听 服务 
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器 端的 new-pin 通道 。 
(2) 下 面 实现 appjjs 中 的 订阅 器 ， 如 下 所 示 。 


let pinBoard = []; 


io.on('connection', (client) => { 
console.1log("connected to realtime data server"); 
client.on('disconnect', () => { 
console.1o0g ("A user is disconnected!"); 
} 


client.on('new-pin', (pinData) => { 
pinBoard.push (pinData); 
k 

]) 

在 上 述 代 码 中 ， 可 以 看 到 较为 清晰 的 变化 内 容 。 其 中 创建 了 一 个 临时 存储 数组 
pinBoard， 以 存储 供 引用 的 全 部 数据 。 一旦 接收 了 new-pin 数据 , 即 可 将 其 推送 至 pinBoard 
中 。 需 要 注意 的 是 ， 当 前 尚 无 法 更 新 UI。 

(3) 为 了 “ 记 住 ”每 一 个 订阅 器 和 监听 器 ， 我 们 需要 设置 一 个 发 射 器 (emitter)。 当 
某 个 功能 块 丢失 或 无 法 正常 工作 时 ， 将 无 法 完成 通信 。 对 此 ， 我 们 需要 通过 依次 发 送 pin 
数据 来 更 新 UI pin 列表 ， 以 便 所 有 的 订阅 客户 端 均 能 够 接收 更 新 内 容 ， 如 下 所 示 。 

client.on('new-pin', (pinData) => { 

pinBoard.push (pinData); 
io.emit ('append-to-list', pinData) 

和 

这 里 创建 了 一 个 名 为 append-to-list 新 通道 或 命名 空间 。 当 在 append-to-list 命名 空间 中 
调用 client.emit 方法 时 ， 该 方法 将 把 数据 发 送 至 订阅 者 的 监听 器 回调 中 。 接 下 来 ， 让 我 们 
在 index.htmljs 的 客户 端 代 码 上 创建 一 个 监听 器 ， 如 下 所 示 。 

socket .on('append-to-list', function(data) { 

$('.collection') .append('<div class="card"> 
<div class="container"><p>' + 

data.story + '</p><h4><b>' + data.writtenBy + 
"</b></h4></div></div>7) 

后 
如 果 向 pinBoard 中 添加 了 新 消息 ， 下 面 将 检测 pinBoard 是 否 在 两 个 不 同 的 浏览 器 选 
项 卡 中 被 更 新 。 运 行 node appjs 命令 ， 并 在 浏览 器 中 访问 http://localhost:3400， 对 应 结果 
如 图 11.2 所 示 。 
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图 11.2 


图 11.2 中 并 列 显示 了 两 个 浏览 器 。 此 时 ， 用 户 正在 输入 一 个 新 帖子 。 这 两 个 浏览 器 
都 允许 客户 端 连接 到 pinBoard 服务 器 应 用 程序 。 让 用 户 单 击 了 Post 按钮 后 检查 客 
户 端 操作 的 结果 。 图 11.3 显示 了 单 击 后 的 状态 。 
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可 以 看 到 ， 两 个 浏览 器 客户 端 均 接收 到 相同 的 帖子 ， 这 一 结果 十 分 有 用 。 
(4) 处 理 客 户 端 默 认 的 虚拟 pinBoard 数据 ， 以 及 包含 相关 逻辑 的 服务 器 代码 ， 如 下 
所 示 。 


io.on('connection', (client) => { 
console.log("connected to realtime data server"); 
io.emit ('pin-list', pinBoard) 
client.on('disconnect', () => { 
console.10g("A user is disconnected!"); 
}) 


client.on('new-pin', (pinData) => { 
pinBoard.push (pinData); 
console.1log("pinData", pinData); 
io.emit ('append-to-list', pinData) 
my 
Ds 


在 上 述 代 码 中 ， 默 认 情况 下 ， 我 们 通过 pin-list 通道 发 送 pinBoard 数据 。 这 样 做 是 为 
了 能 够 动态 处 理 pin-list 数据 。 

(5) 在 index.htmljs 中 ， 移 除 将 card 作为 类 名 的 div 元 素 及 其 所 有 内 容 ， 并 将 其 移 至 
jQuery 代码 中 。 这 样 ， 当 在 pin-list 通道 中 接收 时 ， 仅 当 默 认 状 态 下 pinBoard 数据 不 存在 
时 ， 方 可 将 其 追加 至 collection 类 元 素 中 。 下 列 代码 显示 了 index.htmljs 中 的 修改 内 容 。 


//index.html .js 
module .exports = 
<!DOCTYPE html> 
<html> 
<head> 
<title>Pin board</title> 
</head> 
<style> 
body{ 
background-color: #CCB; 
} 
-Card 二 
/* Rdd shadows to create the "card" effect */ 
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
transition: 0.3s; 
width: 30%; 
background-color: white; 
float: left; 


JavaScript 与 JSON 从 入 门 到 精通 〈 第 2 版 ) 


第 11 章 实时 系统 和 分 布 式 系统 中 的 JSON »145. 


$s(function () { 


Const socket = 10o(); 
$("#postButton") .on('click', function(e){ 
let textData = $("#textData") .val (); 
let writtenBy = $("#writtenBy") .val (); 
socket .emit ('new-pin', {story: textData, 
writtenBy: writtenBy}); 
$ ("#textData") .val (''); 
$("#writtenBy") .val (''); 
return false; 
}) 
socket .on('append-to-list', function(data){ 
$('.collection') .append('<div class="card"><div 
class="container"><p>'+data.story+'</p><h4> 
<b>'+data.writtenBy+'</b></h4></div></div>') 
}) 
/* 大 
* Pin-list get all the pins on load 
socket .on('pin-list', function(list){ 
console.log("list", list); 
if(list.length){ 
list.forEach (function (data){ 
$('.collection') .append('<div class="card"><div 
class="container"> 
<p>'+data.story+'</p><h4><b>'+data.writtenBy+'</b></h4> 
</div></div>') 
}) 
yelsel 
$('.collection') .append('<div class="card"><div 
class="container"><p>Lorem Ipsum is simply dummy 
text of the printing and typesetting industry. Lorem Ipsum has been the 
standard dummy text ever since the 1500s, when an unknown printer took 
a galley of type and scrambled it to make a type specimen book. It has 
survived not only five centuries, but also the leap into electronic 
typesetting, remaining essentially unchanged. It was popularised in the 
1960s with the release of Letraset sheets containing Lorem Ipsum 
passages, and more recently with desktop publishing software like Aldus 
PageMaker including versions of Lorem Ipsum.</p><h4><b>John Doe</b> 
</h4></div></div>') 


| 
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好 
</script> 
</html> 


(6) 最 后 ， 重 新 启动 节点 App， 并 再 次 访问 http://localhost:3400。 这 里 ， 输 


持 不 变 ， 但 pin 列表 已 被 正确 地 加 以 处 理 ， 如 图 11.4 所 示 。 


C © localhost:3400 


溢 Apps 国 coop 
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it to make a type specii 
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uly hve coutaries. bat aleo Jeep tngo electronie 
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Popolarised In the L960% with the release Of Letraset 


theotn oontaining, er Ipsum 


pas more 
publishin ofan like/ Aldus 
he inclocing Versions Of Lorem jpau 


John Doe 


图 11.4 


输出 结果 保 


当前 ， 基 于 JSON 数据 的 实时 应 用 程序 已 处 于 就 绪 状态 。 如 果 WebSockets 未 得 到 良 


支持 ， 


现 ， 并 最 大 限度 地 利用 服务 器 端 和 客户 端 
至 此 ,实时 应 用 程序 中 的 JSON 实现 暂 告 -一 段落 。 接 下 来 将 讨论 分 布 式 系统 中 的 JSON 
实现 。 


者 数据 流 随 时 间 的 变化 而 增长 ， 则 可 考虑 采用 分 布 式 系统 。 


Socket.IO 可 针对 长 轮 询 生成 顺畅 的 回调 ， 同 时 还 可 简化 WebSockets 的 整体 实 


11.2 在 Apache Kafka 中 使 用 JSON 


分 布 式 系统 是 在 网 络 上 隔离 的 逻辑 系统 。 若 应 用 程序 希望 在 网 络 上 实现 横向 伸缩 , 或 


Kafka 是 一 个 分 布 式 流 处 理 平台 ， 


在 后 续 内 容 中 


， 数 据 流 将 简称 


充当 流 的 生产 者 和 使 


者 代理 。 在 Kafka 中 ， 


生产 


者 可 视 为 提供 数据 的 任何 实体 ， 而 使 用 者 则 表示 为 接收 数据 


和 使 


Kafka 


的 。 


t 类 平台 在 股票 市 场 和 地 理 空间 应 用 程序 等 


本 节 将 通过 之 前 简单 的 实 
的 各 项 功能 


。 对 此 ， 图 11.5 展示 了 划 


领域 十 分 有 


寺 应 用 程序 来 实现 JSON 数 
中 的 一 些 关键 字 。 


的 任何 实体 。 


月 


昌 的 通信 ， 


日 ， 其 间 ， 数 据 是 不 断 被 产生 


进而 研究 Apache 
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Kafka broker 


消费 者 从 注册 的 
生产 者 生成 数据 topic 中 获取 数据 
并 推送 至 topic 


生产 者 1 


生产 者 2 


生产 者 n - 
消费 者 分 组 


Kafka topic 2 


图 | 型 5 


图 11.5 中 显示 了 Kafka 中 一 些 基 本 的 流 。 另 外 ，Kafka 代理 与 Zookeeper 实现 了 紧密 
的 耦合 ， 稍 后 将 对 Zookeeper 予以 介绍 。 


11.2.1 配置 Apache Kafka 

读者 可 访问 http://kafka.apache.org/downloads 下 载 Apache Kafka。 需要 注意 的 是 , Unix 
和 Windows 系统 包含 了 不 同 的 安装 过 程 。 

对 于 Unix 系统 , 需要 解压 kafka_ 2.11-1.0.0.tgz 压 缩 包 。 当 前 下 载 的 文件 位 于 Downloads 
目录 中 ， 我 们 可 于 其 中 使 用 下 列 命令 完成 处 理 过 程 。 


$ cd ~/Downloads/ 
$ tar -xvf kafka 2.11-1.0.0.tgz 


待 全 部 文件 解压 完毕 后 ， 即 可 开始 使 用 Kafka。 启 动 Kafka 服务 器 的 相关 步骤 如 下 。 
(1) 访问 当前 目录 并 执行 下 列 命令 。 
$ cd kafka 2.11-1.0.0 


(2) 通过 下 列 命令 启用 zookeeper 实例 。 


$ bin/zookeeper-server-start.sh config/zookeeper .properties 


确保 zookeeper 服务 处 于 运行 状态 ， 且 不 会 在 各 项 步骤 之 间 退 出 。 图 11.6 显示 了 相应 
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的 运行 状态 。 


554] INF 
48,554] WARN Et 


49,576] INF 
49,577] INF 


图 11.6 


(3) 最 后 ， 通 过 下 列 命 令 在 Terminal 或 命令 行 提示 符 中 启用 Kafka 服务 。 
$ bin/kafka-server-start.sh config/server.properties 


述 命 令 的 输出 结果 显示 了 config 目录 中 提供 的 配置 日 志 , 以 及 与 Zookeeper 间 的 连 

oe 

人 Zookeeper 是 什么 ? 为 什么 要 使 用 Zookeeper? 它 与 纯 Kafka 有 什么 不 同 ? 

相信 读者 也 怀 有 此 类 疑问 。 为 了 实现 应 用 程序 的 某 些 功能 , 在 不 同 机 器 上 运行 的 程序 
之 间 进 行 协调 是 一 项 困难 的 工作 。Zookeeper 是 一 个 开源 服务 供应 商 ， 它 提供 了 分 布 式 系 
统 之 间 的 简单 协调 机 制 。 考 虑 以 下 场景 : 假设 我 们 有 两 台 服务 器 ， 一 台 Zookeeper 的 实例 
名 为 broker 1， 另 一 台 Zookeeper 实例 名 为 broker 2。 如 果 broker 1 在 开始 阶段 即 配置 为 主 
服务 器 ， 并 且 brokerl 出 现 故障 ， 那 么 ，Zookeeper 中 央 服 务 负 责 管 理 新 代理 的 选取 操作 

Kafka 自身 是 一 个 简单 的 消息 传递 系统 ， 并 提供 了 发 布 -订阅 模型 。 此 外 ，Kafka 也 是 
一 个 基于 临时 数据 库 的 队列 系统 。 考查 以 下 示例 : 假设 需要 开发 一 个 系统 并 处 理 较为 重要 
的 非 实 时 数据 ， 例 如 电子 邮件 的 发 送 。 对 此 ， 可 通过 Kafka 将 作业 推送 至 Kafka 代理 中 ; 
而 Worker 程序 则 在 需要 时 获取 作业 并 发 送 电子 邮件 。 这 可 视 为 一 种 基本 思路 。 通 过 管理 
消息 系统 、 实 时 流 处 理 以 及 分 布 式 系统 协作 ,Kafka 与 Zookeeper 间 的 集成 使 其 优势 倍增 
因此 ， 当 讨论 Kafka 时 ， 不 可 避免 地 会 涉及 Zookeeper 集成 ， 二 者 紧密 耦合 。 另 外 ， 关 于 
持久 化 存储 ，Kafka 则 依赖 于 Zookeeper。 当 利用 相关 命令 启动 Kafka 时 ， 同 时 也 建立 了 
与 Zookeeper 和 所 选 主 服 务 器 间 的 连接 

相应 地 ，Zookeeper 将 管理 Kafka 集群 ， 并 跟踪 主题 、 消 息 等 内 容 。 关 于 Zookeeper 
和 Kafka 的 更 多 信息 ， 读 者 可 分 别 访问 http://zookeeperapache.org/ 和 https://kafka.apache. 
org/ 


11.2.2 ”利用 Socket.IO 应 用 程序 实现 Kafka 


本 节 将 通过 Kafka 在 实时 应 用 程序 中 实现 一 个 简单 的 JSON 消息 传递 功能 , 并 计划 在 
某 个 特定 的 时 间 段 内 将 随机 消息 发 送 至 Kafka 中 。 相 应 地 ,注册 于 Kafka 中 的 所 有 使 用 者 
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均 会 接收 到 相关 消息 。 作 为 一 个 接收 者 ， 我 们 还 将 使 用 实时 pinBoard 应 用 程序 。 

应 用 程序 流 和 Kafka 的 一 些 细节 内 容 如 下 。 

(1) 创建 一 个 名 为 kafka-appjs 的 新 文件 ， 并 隔离 Kafka 的 最 终 实现 版 本 。 

(2) 安装 kafka-node 作为 Kafka 的 节点 客户 端 。 另外， 这 还 将 提供 与 Zookeeper 之 间 
的 集成 。 下 列 命 令 用 于 安装 kafka-node。 

npm install kafka-node --save 

(3) 包含 kafka-appjs， 如 下 所 示 。 

const kafka = require('kafka-node'); 

(4) 作为 依赖 项 启用 Kafka 代理 进行 消息 传递 ， 目 前 尚 缺少 一 个 步骤 ， 即 创建 主题 
(topic)。 因 此 ， 当 连接 Kafka 实例 时 ， 还 需要 检查 是 否 创建 了 一 个 名 为 pinBoard 的 主题 。 
若 不 存在 ， 下 列 代码 将 对 此 加 以 创建 。 


Const kafkaClient = new kafka.Client (); 


kafkaClient.once('connect', function() { 
kafkaClient .loadMetadataForTopics([], function(error, results) { 
1f (error) 1 
return console.error (error); 
} 
let listofTopics = Object.keys (results[1]['metadata']); 
if (1istofTopics.indexof('pinBoard') == -1) { 
producer.createTopics(['pinBoard'], (err, data) => { 
console.log("New 'pinBoard' Topic created", err, data); 
//sendMessage(); 
Fe 
pt 
//sendMessage () 
} 
DD); 
]) 


上 述 代码 由 以 下 活动 构成 。 

(1) 建立 与 Kafka 间 的 连接 。 

(2) 利用 kafkaClient.loadMetadataForTopics 获取 与 现 有 元 数据 相关 的 全 部 信息 。 

(3) 如 果 所 接收 的 响应 中 不 存在 pinBoard 主题 ， 则 对 其 加 以 创建 。 

(4) 创建 一 个 生产 者 ， 并 生成 输入 内 容 。 我 们 有 一 个 JSON 文件 ， 其 中 大 约 包含 了 
10 个 输入 ， 且 每 分 钟 被 发 送 到 Kafka 中。 下列 代 码 用 于 包含 该 JSON 文件 。 
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const storyJSON = require('./story.json'); 
生产 者 函数 如 下 所 示 。 
function sendMessage() { 
let count = -1; 
setinterval(() => 
count = count == 9 2 count, = 0 ++cOUunts 
/** 
* [messages multi messages can be an array, 
* single message can be a string or 
* a JSON] 
0 
producer.send([{ 
topic: "pinBoard'， 
messages: JSON.stringify(storyJSON[count]), 
}], (err, data) => { 
console.log("Message send by producer", err, data); 
}) 
}, 60000) 
} 


(5) 当 使 用 上 述 代码 中 的 producer 实例 时 , 须 在 起 始 阶 段 的 初始 化 过 程 中 通过 下 列 代 
人 码 对 其 加 以 创建 。 
const producer = new kafka.Producer (kafkaClient); 


(6) 当 producer 实例 可 供 使 用 时 , 可 通过 producersend( 方 法 将 消息 数据 发 送 至 Kafka 
代理 中 。 需要 注意 的 是 , 这 是 一 个 异步 方法 , 因而 需要 作为 回调 传递 第 二 个 参数 。 在 JSON 
中 的 第 10 个 元 素 之 后 ， 上 述 代码 片段 还 设置 了 一 条 计数 器 重 置 逻辑 。 

另外 ， 我 们 还 需要 对 出 现 的 错误 进行 处 理 。 对 此 ，Kafka 客户 端 模 块 提供 了 一 个 事件 
监听 器 ， 进 而 处 理 生产 者 -代理 -使 用 者 状态 间 出 现 的 相关 错误 ， 如 下 所 示 。 

producer.on('error', functionl(err) { 

console.1log('Producer is in error state'); 


console.log (err); 
]) 


(7) 取消 对 sendMessage(O 调 用 的 注释 。 除 此 之 外 ， 还 应 确保 两 个 Kafka 服务 均 处 于 
运行 状态 ; 和 否则， 可 启动 Zookeeper 和 Kafka， 并 于 随后 通过 下 列 命令 运行 kafka-app.js 
文件 。 


node kafka-app.js 


时 
册 
竺 
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对 应 输出 结果 如 图 11.7 所 示 。 


brunos-MacBook-pro:chapter 11 bruno$ node kafka-app.js 
Producer will send message at every interval of 1 nin 


Waiting for 1 min... 
Message send by producer null { pingoard: { '0': 23 } } 


图 11.7 


通过 上 述 各 项 步骤 ,我 们 已 经 成 功 地 创建 了 一 个 Kafka 生产 者 ,并 将 数据 保存 至 Kafka 
中 。 当 检测 实时 更 新 以 及 消费 者 是 否 接收 数据 时 ， 可 利用 下 列 shell 命令 连接 Kafka 消费 者 。 

$ bin/kafka-console-consumer.sh --bootstrap-server localhost:9092 

--topic pinBoard --from-beginning 

0 如 果 Kafka 中 包含 了 Zookeeper 的 早期 版 本 , 应 确保 在 上 述 消费 者 配置 命令 的 执 
行 过 程 中 传递 强制 Eee <urls>。 其 中 ，urls 由 主机 和 端口 组 成 ， 进 而 提供 了 
Zookeeper 连接 。 相 应 地 ， 还 可 包含 多 个 URL 以 处 理 代理 故障 


As 人 fA 本 大 
上 述 命令 的 输出 结果 如 图 11.8 所 示 。 
brunos-MacBook-Pro:kafka_2.11-1.0.0 bruno$ bin/kafka-console-consumer.sh --bootstrap-server localhost:9092 --topic pinBoard --from-beginning 


Wu cannot shake hands with a clenched fi tenBy":"Indira Gandhi"} 
ien you reach the end of your rope”,"writts tie a knot in it and hang on"} 
orning never exhausts the mind", "nrittenBy":"Leonardo da Vinci"} 
cannot shake hands with a clenched fist", "writtenBy":"Indira Gandhi"} 
en you reach the er your nn ittenBy": "tie a in it and hang on"} 


p 
en you reach the end of your rope.. tie a knot in it ond hang on", "writtenBy":"Fronklin D. Roosevelt"} 
"But man is not made for defeat. A mon con be destroyed but not defeated", "nrittenBy":"Ernest Hemingway"} 
hen you reach the end of your rope.. tie a knot in it and hang on”,"writtenBy":"Franklin D. Roosevelt"} 
lere is nothing Permanent excep 

You cannot shake hands with a ci 

":"Learning never exhausts the mind"， 


:现实 时 应 用 程序 中 “消费 者 ”这 一 概念 ， 这 也 将 利用 Kafka 完成 我 们 的 JSON 
消息 传递 系统 。 这 里 ，appjs 视 为 当前 的 使 用 者 ， 其 中 包括 : 

(1) 首先 需要 创建 一 人 并 在 端口 9092 (这 也 是 
客户 端 ， 如 下 所 示 。 


端口 ) 上 连接 至 Kafka 


const kafka = require('kafka-node'), 
client = new kafka.-Client()， 
consumer = new kafka.Consumer (client, 
Li Eopies "pinaoard"y oftsets QF] 
{ 
autoCommit: false 
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这 里 创建 了 一 个 消费 者 实例 ， 它 采用 topic 连接 至 Kafka。 此 类 主题 作为 数组 参数 传 
递 至 kafka.Consumer() 方 法 中 。 
(2) 创建 一 个 错误 处 理 程序 ， 并 管理 消费 者 一 端的 全 部 错 其 实现 过 程 如 下 所 示 。 
consumer.on('error', function (err) { 
console.1log('Error:',err); 
31 
(3) 一 旦 consumer 准备 就 绪 ， 即 可 监听 消费 者 获取 的 全 部 消息 。 注 意 ， 在 Kafka 中 ， 
消费 者 获取 消息 意味 着 Kafka 服务 并 不 像 ping-pong 服务 器 那样 显 式 地 发 送 消息 。 这 也 是 
实时 实现 中 的 不 同 之 处 ， 像 是 在 一 个 SocketIO 应 用 程序 中 。 
对 应 代码 如 下 所 示 。 
consumer.on('message', function(message) { 
console.log("consumer message-->", (message)); 
if (typeof message.value == 'string') { 
const pinData = JSON.parse (message.value); 
pinBoard.push (pinData); 
io.emit ('append-to-list', pinData) 
} else 
throw message.value; 
1); 
上 述 代码 用 consumer.on('message',function(message) {}) 事 件 监听 器 方法 获取 消息 ， 当 
所 接收 的 数据 是 字符 串 时 将 采用 JSON.parse 解析 消息 ,鉴于 JSON 的 结构 等 同 于 pinBoard 
应 用 程序 中 Ee. " JSON， 因 而 可 向 append-to-list Socket.IO 通道 发 送 pinData， 以 便 每 分 
钟 后 可 在 浏览 器 中 查看 到 新 的 pin。 
(4) 通过 a 证 令 启 动 使 用 者 节点 服务 。 


node app.js 
(5) 连接 至 http://localhost:3400/， 对 应 结果 如 图 11.9 所 示 。 


€ ~» C © localhost3400 


灌 Apps 国 cooja 


But man is not made for defeat. A man can be When you reach the end of your rope.. tie a knot in 
fe and hang on 


stroyed but not defeated 


Ernest Hemingway Franklin D. Roosevelt 
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在 图 11.9 中 可 以 看 到 ， 每 分 钟 将 有 新 内 容 添加 至 列表 中 。 

需要 注意 的 是 , 我 们 可 将 多 个 消费 者 应 用 程序 连接 至 运行 于 不 同 端口 上 的 Kafka 客户 
端 ， 进 而 接收 来 自生 产 者 的 Kafka 消息 。 另 外 ， 根 据 Kafka 集群 ， 生 产 者 还 可 以 作为 消费 
者 进行 扩展 。 唯 一 需要 注意 的 是 保持 维护 的 成 本 。 


11.3 本 章 小 结 


本 章 针 对 实时 系统 和 分 布 式 系统 实现 了 JSON 数据 。 其 中 ,关于 如 何 将 数据 作为 集合 
传递 给 WebSocket 通道 ， 实 时 实现 给 出 了 相应 的 整体 思路 。WebSocket 实现 于 Socket.IO 
中 , 其 速度 非常 快 且 工作 可 靠 , 它 目 前 在 产品 级 别 上 服务 于 大 量 的 应 用 程序 , 例如 Trello、 
Blog Talk Radio 和 Zendesk。 
另外 ， 本 章 还 介绍 了 分 布 式 系统 中 的 一 些 概念 ， 并 实现 了 Kafka 中 的 简单 功能 。 基 于 
实时 应 用 程序 的 Kafka 实现 提出 了 这 样 一 种 理念 ， 即 扩展 像 消费 者 一 样 工 作 的 实时 应 月 
程序 。 

了 解 实 时 和 分 布 式 系统 的 概念 将 有 助 于 读者 为 数据 可 用 性 和 系统 可 伸缩 性 提供 解决 
方案 。 第 12 章 将 讨论 不 同 领域 中 实现 JSON 数据 时 的 高 级 JSON 格式 ， 例 如 地 理 空间 领 
域 、SEO 和 数据 存储 。 
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JavaScript 简单 对 象 表示 法 是 改变 数据 交换 技术 领域 的 一 颗 种 子 。 简 单 的 大 括号 ({}) 
格式 、 键 - 值 对 结构 、 可 读 性 和 易 操 作 性 使 它 具 有 很 大 的 吸引 力 。 事 实 上 ，JSON 已 经 成 
为 该 领域 的 领先 者 , 其 他 数据 交换 格式 都 以 JSON 为 基础 。 开 源 生态 系 统 中 存在 多 种 JSON 
格式 ， 且 均 源 自 JSON。 

本 章 主要 考查 以 下 几 种 格式 。 

口 GeoJSON。 

口 JSONLD。 

口 BSON. 

口 ” MessagePack。 

下 面 将 对 此 加 以 逐一 讨论 。 


12.1 GeoJSON 一 一 地 理 空间 JSON 数据 格式 


GeoJSON 是 基于 JSON 的 一 种 实现 ， 同 时 专门 针对 地 理 空间 数据 而 设计 。 这 里 ， 地 
理 空间 数据 是 表示 任何 空间 或 其 几何 形状 的 一 个 区 域 的 信息 。 

区 域 的 形状 可 以 可 视 化 为 正方 形 、 拖 形 或 具有 特定 测量 值 的 任何 其 他 多 边 形 ,， 并 使 用 
纬度 和 经 度 坐 标 进行 定位 。 

GeoJSON 由 互联 网 工程 任务 组 (Internet Engineering Task Force，IETF) 予以 标准 化 。 
GeoJSON 针对 各 类 地 理 空间 数据 提供 了 相关 规范 。 下 面 考查 基本 的 geoJSON 结构 ， 如 下 
所 示 。 

| 

"type": "Polygon", 


"coordinates": [ 
[ 
[100,0], 
[101,0], 
[101,1], 
[100,1]， 
[100,0] 
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上 述 JSON 数据 设置 了 两 个 键 ， 对 应 类 型 表示 为 几何 类 型 ， 即 引用 了 7 个 大 小 写 敏感 
的 字符 串 : Point、MultiPoint、LineString、MultiLineString 、Polygon、MultiPolygon 和 
GeometryCollection 。 
缕 下 来 是 坐标 键 ， 它 是 lat 和 long 值 对 构成 的 数组 点 列表 。 每 组 数值 形成 了 几何 类 型 
的 地 理 形 状 。 
每 个 几何 对 象 都 是 一 个 Feature 对 象 的 包装 器 。Feature 对 象 包含 几何 图 形 和 属性 ， 
户 可 以 将 这 些 几 何 图 形 和 属性 设置 为 SON、null 或 其 他 可 能 需要 的 格式 ， 如 下 所 示 。 


{ 
"type": "Feature", 
"geometry": 
{ 
"type": "Linestring", 
wcoordinates": [ 
[102, 0], 
[103, 1], 
[104, 0], 
[105, 1] 


"properties": 
| 
"Prop0": "value0"， 
“OPCPjr 0 
} 
} 
当 某 个 应 用 程序 需要 使 用 多 个 Feature 列表 时 ，geoJSON 还 设置 了 一 个 名 为 
featureCollection 的 数组 结构 。featureCollection 由 多 个 Feature 构成 。 
这 种 媒体 类 型 可 应 用 于 多 种 领域 ， 例 如 Web 映射 、 地 理 空 间 数 据 库 、 地 理 数 据 处 理 
API、 数 据 分 析 和 存储 服务 以 及 数据 传播 。 
目前 ， 市 场 上 已 出 现 了 基于 geoJSON 的 多 种 工具 ,例如 leafletjs (参见 http://leafletjs. 
comy)、cartodb( 人 参见 https://github.com/CartoDB/cartodb ) 以 及 turfjs (参见 http://turfjs.org/)。 


12.2 JSONLD 一 一 针对 SEO 的 JSON 格式 


JSONLD 是 指 包 含 链接 数据 结构 的 JSON。 下 面 首先 讨论 链接 数据 结构 的 含义 。 假 设 
我 们 在 块 链 上 编写 一 个 博客 ,我 们 需要 向 Web 怜 虫 程序 提供 一 些 元 数据 ， 假 设 这 里 采 
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的 是 谷歌 疏 虫 程序 。 疏 虫 程序 可 解析 HTML 并 读 取 博客 内 容 。 当 前 ， 此 类 疏 虫 操作 通常 
机 器 完成 ,而 非 手工 操作 。 这 些 输 入 元 数据 可 能 包含 一 些 与 下 一 篇 或 上 一 篇 博客 文章 相 
链接 的 信息 ， 也 可 能 包含 与 发 布 该 博客 的 用 户 相 链接 的 信息 。 针 对 于 此 ，JSONLD 提供 了 
一 种 方法 可 实现 这 两 种 操作 。 也 就 是 说 ， 它 既 负 责 处 理 爬 虫 程序 的 元 数据 ， 也 提供 了 其 他 
数据 集 的 链接 。 

例如 ， 当 搜索 区 块 链 时 ， 谷 歌 搜索 引擎 使 用 抓 取 的 数据 提供 最 佳 的 搜索 结果 。 

JSONLD 可 用 于 连接 Web 上 的 数据 。 接 下 来 将 进一步 理解 SONLD， 并 与 链接 数据 
协同 工作 。 

在 Web 开发 过 程 中 ，JSONLD 在 HTML<scrip 亿 标签 中 一 般 定义 为 type="application/ 
ldtjson"， 如 下 所 示 。 

<script type="application/ld+json"> 

{JSONLD data} 

</script> 

除非 在 <scrip 亿 标签 中 传递 类 型 为 application/ld+json 的 JSONLD， 和 否则 搜索 引擎 不 会 
识别 它 。 

- 且 <scripf> 标 签 就 绪 ， 即 可 将 链接 的 JSON 数据 分 配 至 当前 上 下 文中 。 对 此 ， 需 要 

定义 JSON 数据 的 上 下 文 环境 。 该 上 下 文 可 以 是 任何 事物 ， 并 向 实体 提供 背景 词汇 表 。 如 
果实 体 是 一 名 作者 ， 那么 背景 词汇 表 可 包含 名 称 、 地 址 、 书 籍 和 发 布 日 期 等 。 当 前 上 下 文 
的 定义 方式 如 下 所 示 。 
<script type="application/ld+json"> 


,| 
"@context": "http://schema.org/Person" 


1 
</script> 


在 上 述 script 标签 中 , 上 下 文 将 链接 至 schema.org, 特别 是 将 与 某 个 person 实体 链接 。 
这 里 ，schema.org 具体 是 指 : 

“Schema.org 是 一 个 具有 协作 性 质 的 社区 活动 ， 其 任务 是 为 互联 网 、Web 页 面 、 电 子 
邮件 消息 上 的 结构 化 数据 创建 、 维 护 和 推广 相关 模式 ”。 


schema.org 


如 果 任 何 站 点 提供 了 与 上 下 文 相关 的 结构 化 数据 ， 我 们 可 对 此 加 以 使 用 。 对 此 ， 读 者 
可 访问 https://json-ld.org/contexts/person.jsonld 以 查看 另 一 个 示例 。 

下 一 个 较为 重要 的 键 是 @type。 在 当前 示例 中 ， 可 直接 将 其 指定 于 @context 中 (表示 
为 一 个 person)。 相 应 地 ， 我 们 可 利用 @type 关键 字 分 别 对 其 加 以 定义 ， 如 下 所 示 。 
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<script type="application/ld+json"> 
{ 
"@context": "http: //schema.org", 
"@type": "person", 
"name": "robin sharma", 
hb tl oh | 
"@type": "CreativeWork", 
ROUNDOOKSZ 
public speaking" 
1 
由 
</script> 


这 种 不 同 的 定义 方式 也 使 得 我 们 可 针对 多 种 类 型 使 用 上 下 文 。 在 当前 示例 中 ， 当 定义 
与 person 相关 的 数据 时 ， 我 们 采用 了 @type。 对 应 类 型 提供 了 更 为 丰富 的 属性 ， 例 如 名 称 
和 地 址 。 所 有 属性 (例如 name 和 about) 都 与 @type 相关 。 

尽管 JSONLD 已 经 使 用 了 一 段 时 间 ， 但 许多 网 站 并 没有 充分 地 利用 它 。 在 考虑 如 何 
获得 最 佳 的 SEO 结果 时 ，JSONLD 则 变 得 非常 重要 。 


12.3 ”BSON 一 一 快速 遍历 的 JSON 格式 


前 述 章节 曾 讨论 了 MongoDB 中 的 BSON 实现 。 实 际 上 ，MongoDB 是 第 一 个 充分 利 
用 BSON 的 数据 库 。 本 书 并 不 打算 介绍 其 他 实现 方式 ， 此 类 内 容 超出 了 本 书 的 讨论 范围 。 
感 兴趣 的 读者 可 访问 http://bsonspec.org/implementations.html 以 了 解 更 多 内 容 。 

由 于 JSON 数 据 将 转换 为 二 进 制 数据 ,因而 BSON 数据 的 遍历 速度 将 会 有 一 定 的 提升 。 
通过 对 binData 和 Date 类 型 提供 更 为 丰富 的 数据 类 型 方面 的 支持 , BSON 扩展 了 JSON 数 
据 类 型 集合 。 这 一 优点 也 使 得 BSON 可 用 作 任 何 非 结构 化 数据 库 设 计 中 的 记录 。 

如 果 BSON 格式 用 于 网 络 上 的 数据 传递 ， 考 虑 到 数据 的 二 进 制 特征 ， 不 同 网 络 设备 
间 的 编码 和 解码 将 更 加 简单 ， 其 处 理 速度 也 将 有 所 提升 。 

BSON 具有 存储 效率 一 一 但 是 ， 与 序列 化 的 JSON 相 比 ， 其 尺寸 可 能 稍微 大 一 些 ， 其 
原因 在 于 ，BSON 数据 涵盖 了 更 多 属性 ， 例 如 针对 数据 所 呈现 的 数据 类 型 和 数据 长 度 。 


12.4 messagePack 


需要 说 明 的 是 , 还 有 一 种 数据 交换 格式 , 它 比 我 们 目前 介绍 的 所 有 数据 交换 格式 都 更 
节省 空间 。 另 外 ， 它 还 提供 了 二 进 制 序列 化 数据 ， 旨 在 实现 内 存 中 的 快速 操作 。 许 多 著名 
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的 站 点 ， 例 如 Pinterest， 都 采用 了 messagePack 来 压缩 数据 。 

考查 以 下 场景 : 我 们 需要 在 主 缓存 (例如 Redis) 中 存储 某 些 数据 。 在 这 种 情况 下 ， 
人 ss 与 某 个 键 (在 Redis i a hd 
断 插入 ， 了 对 此 ， rien 将 有 ee 率 。 当 
采用 messagePack 编码 数据 时 ， 将 产生 大 约 40% 的 无 损 压 缩 。 

messagePack 的 作者 所 建议 的 另 一 个 应 用 程序 是 跨 服务 RPC 通信 协议 。 在 这 种 情况 下 ， 
两 个 不 同 的 应 用 程序 进程 希望 进行 通信 ， 跨 进程 传递 的 数据 可 能 需要 一 些 额外 的 实现 开 
销 ， 而 处 理 和 存储 则 会 面临 Endianness 问题 。 我 们 可 以 使 用 messagePack 作为 RPC 的 公 
共通 信 协 议 。 

0 与 运行 在 谷歌 v8 编译 器 上 的 普通 JSON 解析 器 相 比 ，messagePack 的 速度 稍 进 一 
筹 。v8 利用 字符 囊 编排 机 制 提供 了 高 度 优化 的 结果 。 有 人 曾 用 v8 引擎 上 的 JSON 编码 器 
对 messagePack 库 进 行 了 基准 测试 ， 对 应 结果 显示 于 https://github.com/mattheworiordan/ 
nodejs-encoding-benchmarks 上 。 


12.5 本 章 小 结 


在 本 章 中 , 我 们 学 习 了 一 些 JSON 格式 的 案例 研究 。 每 个 案例 都 具有 自己 的 优点 和 具 
体 含义 , 读者 在 为 其 实现 作出 合理 决策 时 需 对 此 有 所 了 解 。 这 里 , 也 希望 读者 在 学 习 JSON 
的 过 程 中 度 过 了 愉快 的 时 光 。 但 这 并 不 是 终点 4 旅程 现在 已 经 启 
者 能 够 从 小 处 着 手 ， 不 断 地 练习 ， 因 为 长 期 的 努力 比 短 时 的 冲动 更 为 重要 。 


